Angular 使用按钮和搜索框8过滤卡

我有一张卡片列表，我使用管道通过搜索框对其进行过滤：

export class OrderbyPipe implements PipeTransform{
transform(array: any, sortBy: string, order: string): any[] {
    const sortOrder = order ? order : String; // setting default ascending order   
     return orderBy(array, [sortBy], [sortOrder]);
     }

在我的搜索中，我在Html中这样做：

<mat-card   *ngFor="let s of rslt | sortTurbine:searchTerm">

---

当我单击“运行统计”按钮时，它会过滤列表（rslt）并显示具有运行状态的卡片，但在rslt过滤后，我无法访问我的主列表，即第一个rslt列表，因此我无法再对其进行过滤。

您应该存储两个数组，一个是包含所有未过滤数据的常规数组，另一个是包含过滤数据的数组。在开始时，您将过滤数据设置为包含所有数据，并在html模板中循环过滤数据。然后，在filter函数中，通过过滤常规数组来更新过滤后的数据

它看起来像这样：

export class YourComponent {
    allRslt = [];
    filteredRslt = [];

    ...
    
    ngOnInit() {
       // initialize the variables
       this.allRslt = ...;
       this.filteredRslt = this.allRslt;
    }

    filter(status) {
        this.filteredRslt = this.allRslt.filter(tur => tur.turStat === status);
    }
}

在模板中：

<mat-card *ngFor="let s of filteredRslt | sortTurbine:searchTerm">

您需要使用spread操作符来复制数组，否则数组将是相同的（您只需声明引用同一数组的两个变量名称：

this.filterdrstl=[…this.allRstl]

@Eliseo这两个变量之间有什么区别。filtersslt=this.allRslt和this.filtersslt=[…this.allRslt]在一种情况下，您有一个唯一的数组和两个引用数组的变量，在第二种情况下，您有两个数组。在第一种情况下

this.filterslt.push（'one'）；console（this.allRst）

返回带有'one'元素的数组。（它是同一个数组！）。在第二种情况下，如果是不同的数组，则仅将“一”添加到filterRslt

export class YourComponent {
    allRslt = [];
    filteredRslt = [];

    ...
    
    ngOnInit() {
       // initialize the variables
       this.allRslt = ...;
       this.filteredRslt = this.allRslt;
    }

    filter(status) {
        this.filteredRslt = this.allRslt.filter(tur => tur.turStat === status);
    }
}

<mat-card *ngFor="let s of filteredRslt | sortTurbine:searchTerm">