html - 使用切换角度过滤列表

Question

在我的应用程序中，我正在尝试使用切换过滤列表。我希望切换根据其过滤列表ContactStateType。现在，当我滑动切换开关时，它会过滤整个列表并显示一个空列表，或者它会显示整个列表。它根本不过滤它。我应该在我的代码中添加什么来实现我想要的？

HTML：

 <div fxLayout="row" fxLayoutAlign="end">
                <mat-slide-toggle [(ngModel)]="isActive" (change)="contactFilter()" class="mr-8">
                    {{isActive ? 'Silindi' : 'Aktif'}}</mat-slide-toggle>
            </div>
            <div fxLayout="column" fxLayoutAlign="end" class="mat-elevation-z4 responsive-grid">
                <table mat-table [dataSource]="dataSource" matSort class="stock-table pb-4">
                    <ng-container matColumnDef="CompanyName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Firma Adı</th>
                        <td mat-cell *matCellDef="let row"> {{row.CompanyName}} </td>
                    </ng-container>
                    <ng-container matColumnDef="ContactName">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Ad-Soyad</th>
                        <td mat-cell *matCellDef="let row"> {{row.ContactName}} </td>
                    </ng-container>
                    <ng-container matColumnDef="InternalPhone">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Dahili</th>
                        <td mat-cell *matCellDef="let row"> {{row.InternalPhone}} </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
            </div>

TS：

dataSource: MatTableDataSource<IContact>;
isActive: boolean = true;
contactFilter() {
  this._adminService
      .getContactList()
      .then((response: IContact[]) => {
          if (this.isActive) {
              response = response.filter((x) => x.ContactStateType == 1);
          }

          this.dataSource = new MatTableDataSource(response);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          this.dataSource.filterPredicate = (data, filter) =>
              this.filterPredicate(data, filter);
      });
}
  filterPredicate(data: IContact, filter: string) {
let searchText = '';
if (data.CompanyName) { searchText += (data.CompanyName as any).toLocaleLowerCase('tr'); }
if (data.ContactName) { searchText += (data.ContactName as any).toLocaleLowerCase('tr'); }
if (data.InternalPhone) { searchText += (data.InternalPhone as any); }
if (data.MobilePhone) { searchText += (data.MobilePhone as any); }
if (data.Fax) { searchText += (data.Fax as any); }
if (data.Address) { searchText += (data.Address as any); }
if (data.EMail) { searchText += (data.EMail as any); }
if (data.WebSite) { searchText += (data.WebSite as any); }
if (data.SectorType) { searchText += (data.SectorType as any).toLocaleLowerCase('tr'); }
if (data.Notes) { searchText += (data.Notes as any).toLocaleLowerCase('tr'); }
return searchText.indexOf(filter) >= 0;

}

标签： htmlangulartypescriptangular-material