Почему не обновляется интерфейс, после удаления элемента?

Question

[kikosko]

Я отправляю айди поста от дочернего компонента к родительскому, где обращаюсь к сервису что бы удалить элемент, проверил в консоли элементы удаляются, но изменения не видны в интерфейсе. В методе удаления, после запроса к сервису, делаю повторное получение постов.
Помогите пожалуйста решить эту проблему и понять, что делаю не так

ТС дочернего компонента:

@Output() remove: EventEmitter<number> = new EventEmitter();

    removePost(picId: number): void {
        this.remove.emit(picId);
    }

Темплейт дочернего компонента:

<img [src]="pic.url" alt="test" class="img-responsive">
<p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p>
<div class="card buttons">
    <button class="btn btn-danger del" (click)="removePost(pic.id)">Delete</button>
</div>

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

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

    ngOnInit() {
        this.collection = this.galleryService.getPictures();
    }

    removePost(picId: number): void {
       this.galleryService.remove(picId);
       this.collection = this.galleryService.getPictures();
    }

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

<div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection">
        <app-gallery-item [pic]="pic" (remove)="removePost($event)" (edit)="editPost($event)"></app-gallery-item>
    </div>

Сервис:

import { Injectable } from '@angular/core';
import { myCollection } from  './gallery-data';
import {Picture} from "./gallery-module/gallery/Picture";

@Injectable({
  providedIn: 'root'
})
export class GalleryService {
  Mycollection: Picture[] = myCollection;
  constructor() { }

  getPictures(): Picture[]  {
    return (myCollection);
  }
  remove(picId: number): Picture[] {
   return this.Mycollection  = this.Mycollection .filter(p => p.id !== picId);
  }
}

Answer 1

[0xD34F]

После удаления элемента вы запрашиваете исходные данные - метод getPictures вместо this.Mycollection возвращает myCollection (кстати, а нормальные имена было придумать никак? - без этого уродливого my и чтобы верхний регистр применялся более, м-м-м, единообразно).

Answer 2

[Даша Циклаури]

у тебя сервис потому что всегда возвращает одну и ту же коллекцию, а должен this.Mycollection

getPictures(): Picture[]  {
    return (myCollection);
  }