Html 如何完全删除角形图

我的主页上有多个图表，我有一个搜索框，可以按图表名称对它们进行筛选

当我筛选特定图表时，我可以在开始筛选时删除该图表，并将其从UI中消失，但由于某种原因，当我取消筛选/删除搜索框中的所有文本时，我刚刚删除的图表仍会与其他图表一起出现在主页中

它在后端被删除，但删除的图表仍显示在前端。同样由于某些原因，我仍然可以再次搜索我刚刚删除的那个，但这次我不能再次删除它，因为它抛出404

只有当我刷新浏览器时，它才会完全消失。任何关于我如何使图表消失的建议，即使我在搜索框中未过滤

HTML

//导入此组件以显示图表列表
//我使用此搜索栏按图表的名称进行筛选

TS

@Input（）图表：图表；
工作空间：工作空间；
私人死亡$：主题=新主题（）；
查询：FormControl=new FormControl（）；
图表：图表[]=[]；
searchText:string；
ngOnInit（）：void{
this.activatedRoute.paramMap.pipe（takeUntil（this.death$））.subscribe（（paramMap）=>{
const guid=paramMap.get（'guid'）；
如果（guid）{
this.workspaceService.getWorkspace（guid，this.isPublished）.subscribe（ws=>{
this.workspace=ws；
}，（）=>this.loading=false）；
}
})
//搜索栏
this.query.valueChanges
.pipe（takeUntil（this.death$））
.subscribe（（值：字符串）=>{
这个。搜索（值）；
});
}
搜索（searchText:string）{
//重置
searchText=searchText.toLowerCase（）；
如果（！searchText | | searchText.length==0）{
this.charts=this.workspace.charts；
}
//搜寻
否则{
this.charts=this.charts.filter（chart=>chart.name.toLowerCase（）.indexOf（searchText）>=0）；
}
}
onRemoveFromList（id:编号）{
const index=this.charts.findIndex（e=>e.id==id）；
如果（索引>=0）{
本图为拼接图（索引1）；
}

---

我能做到在搜索功能中，但我认为这不是最好的方法，因此如果有人能帮我解决这个问题，我将不胜感激。

您的工作区。图表拥有所有图表。您正在为

工作区的
图表
赋值。图表
在
onRemoveFromList
功能中，您只能将其从中删除e> 图表
。但是
工作区。图表
仍然具有删除的值。然后，每当您重置搜索时，删除的值将进入
图表
，这就是为什么您会看到这些删除的图表

解决方案：在您的
onRemoveFromList
中，从
工作区中删除图表。图表也可以从
中删除

用一个旗子来检查它是否被过滤了呢？你有没有试过角度变化检测器？嗨，阿里，没有，我两个都没用过，所以你能帮我吗？谢谢你在设置了e.id！==id之后做的工作。非常感谢你的帮助。我真的很感激。是的，我的不好。它一定是id！==id。我会编辑这篇文章的
//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">

@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);
}

  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);
    }