Angular에서 차트를 완전히 제거하는 방법

홈 페이지에 여러 차트가 있고 차트 이름으로 필터링 할 수있는 검색 상자가 있습니다.

특정 차트를 필터링 할 때 해당 차트가 필터링되기 시작하고 UI에서 사라지는 동안 해당 차트를 삭제할 수 있지만, 어떤 이유로 내가 모든 텍스트를 필터링 해제 / 제거하면 나머지 차트와 함께 홈 페이지에 방금 삭제 한 차트가 여전히 나타납니다. 검색 창.

백엔드에서 삭제되었지만 삭제 된 차트는 여전히 프런트 엔드에 나타납니다. 또한 웬일인지 방금 삭제 한 것을 다시 검색 할 수 있지만 이번에는 404를 던지기 때문에 다시 삭제할 수 없습니다.

브라우저를 새로 고치면 완전히 사라집니다. 검색 상자에서 필터링을 해제 한 후에도 차트가 사라지도록하는 방법에 대한 제안.

HTML

//Imported this component to display a list of chart
<ng-container *ngFor="let chart of charts">
   <mc-chart-list [chart]="chart" [wsType]="workspace.type" (removeFromList)="onRemoveFromList($event)"></mc-chart-list>
</ng-container>

//I use this searchbar to filter by the name of the chart
 <input class="input" matInput name="query" [formControl]="query" placeholder="Filter Workspace">

TS

@Input() chart: Chart;
workspace: Workspace;
private death$: Subject<void> = new Subject();
query: FormControl = new FormControl();
charts: Chart[] = [];
searchText: string;


ngOnInit(): void {
    this.activatedRoute.paramMap.pipe(takeUntil(this.death$)).subscribe((paramMap) => {
      const guid = paramMap.get('guid');

      if (guid) {
        this.workspaceService.getWorkspace(guid, this.isPublished).subscribe(ws => {
          this.workspace = ws;
        }, () => this.loading = false);
      }
    })

//For search bar
    this.query.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this.search(value);
      });
}
search(searchText: string){
    // reset
    searchText = searchText.toLowerCase();
    if (!searchText || searchText.length == 0) {
      this.charts = this.workspace.charts;
    }
    // search
    else {
      this.charts = this.charts.filter(chart => chart.name.toLowerCase().indexOf(searchText) >= 0);
    }
  }

onRemoveFromList(id: number) {
    const index = this.charts.findIndex(e => e.id === id);
    if (index >= 0) {
      this.charts.splice(index, 1);
}

검색 기능 내에서 this.ngOnIt () 할 수 있지만 이것이 최선의 방법이라고 생각하지 않으므로 누군가이 문제를 해결할 수 있다면 정말 감사하겠습니다.