How to correctly add a new post first in the array of posts?

I add a post using the method getPictures() on component GalleryComponent (this is the parent component),"post.id" of which is greater than 10, the first in the list, and all other posts "post.id" of which is less than 10 adds at a time. I do this using a condition in the method getPictures (), but when I delete the post, then added the number of posts, ID have more than 10 and only after reloading the page , properly removes the previously selected post and those that were added after clicking the remove button. Tell me how to add a new item first in the list so I didn't have this bug. Please help to solve this problem

Code of the parent component 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();
})
}
}

The template of the parent component GalleryComponent component reference GalleryAddComponent:
<a routerLink="/gallery-add" class="btn btn-outline-success tog">
 Add New Post
 </a>


Code child component 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 requests to the server:
export class GalleryService {
 galleryUrl: string = 'http://localhost:5555/posts';
 httpOptions: object = {
 headers: new HttpHeaders({'Content-Type': 'application/json'})
};
 constructor(private to 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);
}
}
March 12th 20 at 07:57
2 answers
March 12th 20 at 07:59
Solution
Why are you after removal of the post request data (and even while clean collection is that posts should be duplicated)? - much easier and faster to remove one element from the array.

Probably removePost is this.getPictures() should be something like

this.collections.splice(this.collection.findIndex(n => n.id === picId), 1)
thank you, did not think :) - Morton commented on March 12th 20 at 08:02
March 12th 20 at 08:01
Sorry, I do not understand what you said about more than 10 and less than 10.
unshift() to prepend, splice() to remove from any place of the array.
What is the bug?
when I add posts, I want if the post ID is 11 or more, the post added first in the list, that is, unshift(), if equal to or less than 10 turns, that is push(). I have it implemented in the component "GalleryComponent" in the method "getPictures()", but when I want to remove the post there is a bug, since in the removal method "removePost()" method I call "getPictures()" to update the interface. Bug: when I delete the post, then added the number of posts, ID have more than 10 and only after reloading the page , properly removes the previously selected post and those that were added after clicking the remove button. How to properly implement my logic of adding that I didn't have this bug when you delete a post - Morton commented on March 12th 20 at 08:04
@Morton, for some reason reminded of an anecdote:
- The doctor, when I do, it hurts me here.
Don't do that.


I mean getPictures(), which you have instead of splice - josie46 commented on March 12th 20 at 08:07

Find more questions by tags TypeScriptAngular