Как корректно добавлять новый пост первым в массиве постов?

Question

[kikosko]

Я добавляю пост , используя метод getPictures() в компоненте GalleryComponent (это родительский компонент),«post.id» которого больше 10, первым в списке, а все остальные посты «post.id» которых меньше 10 добавляю по очереди. Я делаю это, используя условие в методе getPictures (), но когда я удаляю пост, то добавляется то количество постов, ID которых больше 10 и только после перезагрузки страницы , корректно удаляется ранее выбранный пост и те, что добавились после клика по кнопке удаления. Подскажите как правильно добавлять новый элемент первым в список, что бы не было этого бага. Помогите пожалуйста решить эту проблему

Код родительского компонента GalleryComponent:

export class GalleryComponent implements OnInit {
    collection: Picture[];
    constructor(private galleryService: GalleryService) {
    }

    ngOnInit() {
        this.getPictures();
    }

    getPictures() {
        this.galleryService.getPictures().subscribe((data: Picture[]) => {
            data.forEach(post => {
                if (post.id > 10) {
                    this.collection.unshift(post);
                } else {
                    this.collection.push(post);
                }
            });
        })
    }
    removePost(picId: number): void {
        this.galleryService.remove(picId).subscribe(res => {
            console.log('Deleted');
            this.getPictures();
        })
    }
}

Шаблон родительского компонента GalleryComponent ссылка на компонент GalleryAddComponent:

<a routerLink="/gallery-add" class="btn btn-outline-success tog">
                    Add New Post
                </a>

Код дочернего компонента GalleryAddComponent:

export class GalleryAddComponent implements OnInit {
    isAdded: boolean = false;
    constructor( private galleryService: GalleryService) {}

    ngOnInit() {}
    
    addPost(title: string, url: string): void {
        this.galleryService.add(title, url).subscribe(res => {
            this.isAdded = true;
        });
    }
}

GalleryService с запросами на сервер:

export class GalleryService {
    galleryUrl: string = 'http://localhost:5555/posts';
    httpOptions: object = {
        headers: new HttpHeaders({'Content-Type': 'application/json'})
    };
    constructor(private http: HttpClient) {}

    getPictures(): Observable<Picture[]> {
        return  this.http.get<Picture[]>(`${this.galleryUrl}`);
    }

    remove(picId: number): Observable<Picture> {
        return this.http.delete<Picture>(`${this.galleryUrl}/${picId}`, this.httpOptions);
    }

    add(title: string, url: string): Observable<Picture> {
        const  postObj = {
          title,
            url
        };
        return this.http.post<Picture>(this.galleryUrl, postObj, this.httpOptions);
    }
}

Answer 1

[0xD34F]

А почему вы после удаления поста перезапрашиваете данные (да ещё при этом не очищаете collection - из-за этого посты должны дублироваться)? - куда проще и быстрее удалить один элемент из массива.

Наверное, в removePost вместо this.getPictures() должно быть что-то вроде

this.collections.splice(this.collection.findIndex(n => n.id === picId), 1)

Comments

[kikosko]

спасибо, не догадался :)

Answer 2

[Stalker_RED]

Прости, я нихрена не понял что ты сказал про больше 10 и меньше 10.
unshift() чтобы добавить в начало, splice() чтобы удалить из любого места массива.
В чем именно баг?

Comments

[kikosko]

когда я добавляю посты, я хочу что бы если айди поста 11 или больше, то пост добавлялся первым в списке, то есть unshift(), если равно или меньше 10 то по очереди, то есть push(). Я это реализовал в компоненте "GalleryComponent" в методе "getPictures()", но когда я хочу удалить пост возникает баг, так как в методе удаления "removePost()" я вызываю метод "getPictures()" для обновления интерфейса. Баг: когда я удаляю пост, то добавляется то количество постов, ID которых больше 10 и только после перезагрузки страницы , корректно удаляется ранее выбранный пост и те, что добавились после клика по кнопке удаления. Как правильно реализовать мою логику добавления, что бы не было этого бага при удалении поста

[Stalker_RED]

kikosko, почему-то вспомнился анекдот:

- Доктор, я когда вот так делаю, у меня вот здесь болит.
- Не делай так.

Это я про getPictures(), который у вас вместо splice