如何在 Angular 中完全删除图表

Question

我的主页上有多个图表，我有一个搜索框可以按图表名称过滤它们。

当我过滤特定图表时，我可以在开始过滤时删除该图表，它会从 UI 中消失，但出于某种原因，我刚刚删除的图表仍然与其他图表一起出现在主页中当我 unfiltered/removed 搜索框中的所有文本时。

后台删除了，但是删除的图表还在前台显示。同样出于某种原因，我仍然可以再次搜索我刚刚删除的那个，但是这次我不能再次删除它，因为它抛出 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()，但我认为这不是最好的方法，所以如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

你的 workspace.charts 有所有 charts.you 从 workspace.charts 为 charts 赋值。在你的 onRemoveFromList 函数中你只从 chart.但是 workspace.charts 仍然删除了 value.then 每当您重置搜索时删除的值进入 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);
    }

如何在 Angular 中完全删除图表

how to remove chart completely in Angular

html

angular

typescript

angular-material

angular-material2