Mat-table 根据条件显示行

Question

如果状态 == 'done'，我只想显示 table 上的数据。我尝试这样做，但我所做的只是删除状态，但它仍在显示该行。如何做到这一点？

数据

    { 
        equipmentOrdered: 'laptop', 
        qty: 1,
        status: 'processing', 
    },
    { 
        equipmentOrdered: desktop, 
        qty: 2,
        status: 'done', 
    },
    { 
        equipmentOrdered: 'keyboard', 
        qty: 2,
        status: 'processing', 
    },

table

      <ng-container matColumnDef="equipmentOrdered"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.equipmentOrdered}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="qty"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>QTY</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.qty}}</mat-cell>
      </ng-container>

      //this is just not displaying the status, how to not include whole row?
      <ng-container matColumnDef="status"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
          <mat-cell *matCellDef="let purchaseOrder">
            <ng-container *ngIf="purchaseOrder.status !='done' ">
            {{purchaseOrder.status}}
          </ng-container>
          </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

  </mat-table>

Answer 1

是的，它不会有条件地以这种方式隐藏它，因为您正试图在 mat-cell 定义中篡改它，而不是 mat-row。

我认为最好的方法是 filter 数据源。

在你的.ts中：

// replace with the variable you pass to your mat-table's [dataSource]
this.dataSource = dataSourceArray.filter(row => row.status === 'done'); // returns array with only status === 'done'

注意：如果你的dataSource不是一个普通数组，而是一个MatTableDataSource实例，你应该将你过滤后的数组赋值给this.dataSource.data，不是this.dataSource.

另一种（不太优雅，但更接近您原来的方法）方法是使用 hidden 属性隐藏您的 mat-row：

<mat-row *matRowDef="let row; columns: displayedColumns"
    [hidden]="row.status !== 'done'"></mat-row>

Mat-table 根据条件显示行

Mat-table display rows depending on condition

angular-material

angular

mat-table

angular9