Question

在我的 Material 表中，我添加了几列，但只显示了 3 列。但是，我需要显示所有列。我该怎么做？

我还分享了我的代码 here。

<div class="mat-elevation-z8 data-table">
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> on3 </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> V </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight1">
      <th mat-header-cell *matHeaderCellDef> Q </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> A1 </th>
      <td mat-cell *matCellDef="let element"> {{element.weight1}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight2">
      <th mat-header-cell *matHeaderCellDef> A2 </th>
      <td mat-cell *matCellDef="let element"> {{element.weight2}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight3">
      <th mat-header-cell *matHeaderCellDef> A3 </th>
      <td mat-cell *matCellDef="let element"> {{element.weight3}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight4">
      <th mat-header-cell *matHeaderCellDef> AA </th>
      <td mat-cell *matCellDef="let element"> {{element.weight4}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight5">
      <th mat-header-cell *matHeaderCellDef> DD </th>
      <td mat-cell *matCellDef="let element"> {{element.weight5}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let element">

      </td>
    </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Answer 1

在你想在你的视图中显示的displayColumns中添加matColumnDef，像这样：

 displayedColumns: string[] = ['position','name','weight1','weight','weight2','weight3','weight4','weight5','symbol'];

角度材料表中仅显示 3 列

1 个答案: