Question

我有一个带有列的Angular Material表： tablecolumns：string [] = [“ mbrID”，“ E”，“ B”，“ HasAccess”，“ Att”，“ select”];

我收到的信息可能有两种。类型A已填充所有列。对于类型B，列E和B始终为空。从填充数据源的服务获得的响应中，我无法确定信息是A类型还是B类型。如何检查数据源中那些特定列的值是否为null并隐藏他们在展示吗？

这是我用于填充数据源的Angular代码。

ngOnInit() {
    this.Service.ObservableName.subscribe(
      (response: Recipient[]) => {
        this.RcptData = response;
        console.log(this.RcptData);
        this.tabledata = new MatTableDataSource(response);
      }
    )
  }

收件人界面看起来像这样：

export interface Recipient {
    mbrId: string,
    E: string,
    B: string,
    hasAccess: string,
    att: string[]
}

这是表格的HTML代码中的内容。我只为两列添加了内容，但其余部分相似。：

<table mat-table matSort [dataSource]='RcptData' class="mat-elevation-z8">
  <ng-container matColumnDef="mbrID">
    <th mat-header-cell *matHeaderCellDef>Member ID</th>
    <td mat-cell *matCellDef="let member"> {{member.mbrId}}</td>
  </ng-container>
  <ng-container matColumnDef="E">
    <th mat-header-cell *matHeaderCellDef>E</th>
    <td mat-cell *matCellDef="let member"> {{member.E}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="tablecolumns"></tr>
  <tr mat-row *matRowDef="let row;columns: tablecolumns;"></tr>

</table>

现在，无论数据类型如何，列E和B都是可见的，但我想将其隐藏。由于我没有从后端服务获得什么数据类型，因此我不知道该怎么做。对于类型B，E和B列的值始终为null（整个列）。我可以用这种方式隐藏列吗？

Answer 1

您可以只使用* ngIf这种情况下吗

<ng-container matColumnDef="E" *ngIf="member">
    <th mat-header-cell *matHeaderCellDef>E</th>
    <td mat-cell *matCellDef="let member"> {{member.E}}</td>
</ng-container>

当数据源中整个列为空时，如何在Angular Material表中隐藏列？

1 个答案: