垫表根据条件显示行

Question

我只想在状态==“完成”时在表上显示数据。我尝试做，但我所做的只是删除状态，但它仍然显示该行。这个怎么做？

数据

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

桌子

      <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-rows.

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

在你的.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。

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

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