将过滤器应用于数据源以将特定数据发送到 table

Question

我试图在数据源加载到 mat-table 之前向其添加条件过滤器，因此只有那些处于特定状态 "open" 的数据才能显示在 table.但是我不知道我该怎么做。

我尝试了 Exclude or include the particular row from the mat-table view 的解决方案，但 returns 出现了 TS2349 错误。我还尝试了 ng-if，就像我在其他 table 上所做的那样，但它只隐藏了值并给我留下了很多空行。下面是有错误的代码。

ngAfterViewInit() {
    this.afs.collection<any>('Projects').valueChanges().subscribe(data => {
// TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.
      this.dataSource = new MatTableDataSource(data).filter(data => data.status === 'open');
// error ends
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    })
  }

这是 html 部分：

    <mat-table #table [dataSource]="dataSource" matSort [trackBy]="trackByUid" class="animate" (change)="onChange($event.target.value)">

      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> ID </mat-header-cell>
          <mat-cell *matCellDef="let hacker">
                {{ hacker.id }}
          </mat-cell>
      </ng-container>


      <ng-container matColumnDef="publishedDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Published Date </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.publishedDate }}
        </mat-cell>
      </ng-container>


      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Name </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.name }}
        </mat-cell>
      </ng-container>


      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Type </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.type }}
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="dueDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold; color:#fff"> Due Date </mat-header-cell>
        <mat-cell *matCellDef="let hacker">
                {{ hacker.dueDate }}
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="edit">
          <mat-header-cell *matHeaderCellDef mat-sort-header style="font-weight: bold"> Edit </mat-header-cell>
          <mat-cell *matCellDef="let hacker">
                  <button mat-raised-button  color="primary" (click)="openDialog(hacker)">Edit</button>
          </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" class="animate"></mat-row>
    </mat-table>
      <mat-paginator [length]="100"
                     [pageSize]="10"
                     [pageSizeOptions]="[5, 10, 25, 100]">
      </mat-paginator>

我希望我可以阻止那些 "data.status !== 'open'" 的数据显示在我的 table 上。（现在它显示之前的所有内容知道我该怎么做吗？

Answer 1

你只需要先过滤数据然后然后初始化MatTableDataSource，不要同时进行。下面的代码片段应该可以解决您的问题。

ngAfterViewInit() {
  this.afs.collection<any>('Projects').valueChanges().subscribe(data => {
    const filteredData = data.filter(d => d.status === 'open');   
    this.dataSource = new MatTableDataSource(filteredData);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  });
}

I made a small stackblitz here to show you how you can easily filter the data before displaying it in a table.

Answer 2

如果您想轻松过滤数据， Pipe 是一个很好的 class 可以对 html 中的数据应用过滤器:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

然后在 html 中的数组上使用它，在里面 for:

<ul>
  <li *ngFor="let c of characters | filter : searchText">
    {{c}}
  </li>
</ul>

有关这方面的更多信息：Create a Search Pipe to Dynamically Filter results

将过滤器应用于数据源以将特定数据发送到 table

Apply filter to datasource to send specific data to table

datasource

angular-material

angular

angular7

mat-table