Question

我正在使用角形材质表创建一个表，我想拥有一个主从视图，在该视图中有一行作为主控（例如Provider），在该行下我希望有一个详细信息列表（针对例如交易商品列表）。

我从here看过Table with expandable rows，但是在该示例中，需要单击每个主行以显示详细信息。

是否有可能总是在每个主行之后始终显示多余的细节行，而不必单击每个主行来显示细节？

我尝试使用when谓词，并且始终返回true，但是这仅显示每个主行中的明细行。主行会丢失。

Answer 1

是否有可能总是在每个主行之后始终显示多余的细节行，而不必单击每个主行来显示细节？

您始终可以创建一个自定义表格，根据需要提供密集的行。

从可扩展行的示例开始，我编辑了代码，以显示和隐藏细节的逻辑，因此细节始终可见：

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail expanded">
        <div class="example-element-diagram">
          <div class="example-element-position"> {{element.position}} </div>
          <div class="example-element-symbol"> {{element.symbol}} </div>
          <div class="example-element-name"> {{element.name}} </div>
          <div class="example-element-weight"> {{element.weight}} </div>
        </div>
        <div class="example-element-description">
          {{element.description}}
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

https://stackblitz.com/edit/angular-rgyuhs?embed=1&file=app/table-expandable-rows-example.html

请注意，具有“ example-element-detail”类的div也具有“ expanded”类（当然，它可以是任何其他名称），并且在“ expandedDetail”中定义的所有内容将始终显示在tr中。 example-detail-row“

如何在角形材料表中始终显示两种类型的行

1 个答案: