Angular Firebase数据的角度8滤波函数

我想对存储数据的标题应用过滤器，但过滤后过滤数据的结构不同。我的数据的“键”被过滤器删除并替换为索引

链接到存储库：

以下是我的数据库结构：

筛选前我的项目：

过滤后：

我的组件代码：

filter(query: string) {
    this.filteredItems = (query) ?
    Object.values(this.items).filter(p=>p.title.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
    .toLowerCase().includes(query.toLowerCase())) :
    this.items; 
}

我的模板：

<input #query (keyup)="filter(query.value)" type="text" class="form-control search" placeholder="Recherche...">
<mat-list-item id="item_list" *ngFor="let item of filteredItems | keyvalue ; let i = index" [class.changeColor]="item.key == selectedValue">
  <a (click)="openItem(item, item.key)" *ngIf="item.value.title" matLine><mat-icon [class.yellow]="item.key == selectedValue">code</mat-icon>{{item.value.title}}</a>
  <button mat-icon-button>
    <mat-icon id="edit_item_icon" (click)="onEditItem(item)">edit</mat-icon>
    <mat-icon (click)="openDialog(item.key, item.value.title)">delete_sweep</mat-icon>
 </button>
</mat-list-item>

代码{{item.value.title}
编辑
删除扫掠

---

因此，当我在过滤后单击某个项目对其进行编辑时，它会创建一个新的项目….

循环浏览该项目，并使用

indexOf（）

进行过滤：

过滤器（查询：字符串）{
const result:object={}；
for（让我们输入此.items）{
常量数据=此项[键]；
if（this.items.hasOwnProperty（key）和&data.title&&
data.title.normalize（“NFD”）.replace（/[\u0300-\u036f]/g，”）.indexOf（查询）！=-1）{
结果[键]=数据；
}
}
this.filteredItems=Object.keys（result）.length？结果：this.items；
}

---

我强烈建议您将

this.filteredItems

赋值包装在

ngZone.run（）

中，如果您在dom中使用：

this.ngZone.run（（）=>{
this.filteredItems=Object.keys（result）.length？结果：this.items；
});

请记住使用

constructor（私有ngZone:ngZone）