如何在角度材料表中始終顯示兩種類型的行

Question

我正在使用角度材料表創建一個表，我想要一個主細節視圖，其中我有一行作為主（例如提供者），在該行下我想要一個詳細信息列表（例如一個列表交易項目）。

我從這里看到了Table with expandable rows的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”中-排”