Question

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

我尝试了Exclude or include the particular row from the mat-table view的解决方案，但返回TS2349错误。我也像往常一样在其他表上尝试了ng-if，但是它只隐藏值并留下很多空行。下面是有错误的代码。

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'”这些数据。（现在它正在显示所有内容，然后再知道要怎么做？

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;
  });
}

我做了一个小 stackblitz 在这里向您展示如何轻松显示之前过滤数据放在表中。

Answer 2

如果您想轻松过滤数据，管道是一个很好的类，可将过滤器应用于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数组中，用于：

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

有关以下信息：Create a Search Pipe to Dynamically Filter results

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

2 个答案: