Question

<input type="text" [(ngModel)]="searchTerm" (input)="search()">

我们在第一次搜索时键入要搜索的内容，但是如果我们搜索然后又找不到记录，因为原始数组records被更改，它将仅包含所搜索的记录，而不是所有记录该如何处理。

我可以创建第二个数组来保留所有记录的副本，并将其分配给else if条件中的原始数组，但这仅在我们清空搜索框的情况下才起作用，而如果我们在不清空的情况下再次进行搜索和键入则不会起作用搜索框到最后一个字符。

记录在表中显示为ngfor。搜索功能适用于该表

 searchTerm : any;
    records: any;  //array of objects

    search(){
 if(this.searchTerm !== ""){
     this.records = this.records.filter((res: any)=>{
            return (res.name && res.name.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase()));
          });
} else if(this.searchTerm === "") {

}
    }

Answer 1

您的对象位于this.records中，当您进行搜索时，将结果再次分配给相同的变量this.records。下次搜索时，不会得到它，因为数组中不存在这些项目。为搜索结果创建另一个数组。

this.filteredRecords = this.records.filter((res: any)=>{
    return (res.name && res.name.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase()));
});

并取决于您如何处理不同的用例。搜索时，显示fiteredRecords包含从过滤函数返回的结果，并且在正常情况下searchTerm为空：

else if(this.searchTerm === "") {
 this.filteredRecords = this.records
}

Answer 2

对于这种情况，角管是最佳解决方案。创建一个搜索管道，它将过滤并渲染DOM中的过滤数组，但不会更新原始数组

Angular Pipe

如果由于原始数组被更改而再次搜索，我的搜索功能将无法正常工作

2 个答案: