как полностью удалить график в Angular

Question

• 1000 по какой-то причине диаграмма, которую я только что удалил, все еще отображается на домашней странице вместе с остальными другими диаграммами, когда я не отфильтровал / удалил весь текст в поле поиска.

Он был удален в бэкэнде, но удаленная диаграмма все еще появляется в интерфейсе. Также по какой-то причине я все еще могу искать его снова, тот, который я только что удалил, но на этот раз я не могу удалить его снова, так как он выдает 404.

Он полностью исчезает только при обновлении sh браузера. Любые предложения о том, как я могу заставить диаграмму исчезнуть даже после того, как я не отфильтровал в поле поиска.

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 () внутри функции поиска, но я не думаю, что это будет лучший способ сделать это, поэтому буду очень признателен, если кто-нибудь поможет мне это исправить.

Answer 1

ваша рабочая область. Диаграммы имеют все диаграммы. Вы назначаете значение для charts из workspace.charts. В своей функции onRemoveFromList вы удаляете его только из chart. Но workspace.charts все еще имеет это удаленное значение . затем всякий раз, когда вы сбрасываете поиск, удаленные значения попадают в charts, поэтому вы видите эти удаленные диаграммы.

Решение: в вашем onRemoveFromList удалите также диаграмму из workspace.charts.

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