如何在角度材料表中始终显示两种类型的行 [英] How to always display two types of rows in angular material table

问题描述

我正在使用有角度的材料表创建一个表，我想要一个主从视图，其中我有一行作为主(例如提供者)，在该行下我想要一个详细信息列表(例如例如交易项目列表).

我从 这里看到了带有可扩展行的表格a>，但是在该示例中，需要单击每个主行才能显示详细信息.

是否有可能总是在每个主行之后显示额外的详细信息行，而不必单击每个主行来显示详细信息?

我已尝试使用 when 谓词并始终返回 true，但这仅显示每个主行中的详细信息行.主行丢失.

解决方案

是否有可能总是在每个主行之后显示额外的详细信息行，而不必单击每个主行来显示详细信息?

您始终可以创建自定义表格，根据需要提供包含详细信息的行.

从可扩展行的例子开始，我编辑了代码，采用了显示和隐藏细节的逻辑，所以细节总是可见的:

<ng-container matColumnDef="{{column}}";*ngFor="let column of columnsToDisplay"><th mat-h​​eader-cell *matHeaderCellDef>{{column}} </th><td mat-cell *matCellDef=let element">{{元素[列]}} </td></ng-容器><!-- 扩展内容列- 详细信息行由跨越所有列的这一列组成--><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 class="example-element-description">{{元素.描述}}<span class="example-element-description-attribution">-- 维基百科</span>
</td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef=columnsToDisplay"></tr><tr mat-row *matRowDef="let element;列:columnsToDisplay;"类=示例元素行"[class.example-expanded-row]=expandedElement === 元素"></tr><tr mat-row *matRowDef="let row;列:['expandedDetail']"class="example-detail-row"></tr>

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

观察到带有example-element-detail"类的 div.也有扩展"类(当然可以是任何其他名称)和expandedDetail"中定义的所有内容.将始终显示在 tr example-detail-row"

I am creating a table using angular material table and I want to have a master-detail view, where I have a row as the master (for example Provider) and under that row I want to have a list of details (for example a list of Deal items).

I have seen the Table with expandable rows from here, however in that example each master row needs to be clicked to reveal the detail.

Is there a possibility of always showing the extra detail rows after each master row without having to click each master row to reveal the detail?

I have tried using the when predicate and always return true, however that just shows the detail rows in each of the master rows. The master rows are lost.

解决方案

Is there a possibility of always showing the extra detail rows after each master row without having to click each master row to reveal the detail?

You can always create a custom table, providing rows as dense with details as you want.

Starting from the example of Expandable rows, I edited the code taking the logic of showing and hiding the details away, so the detail are always visibile:

<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

Observe that the div with the class "example-element-detail" also have "expanded" class (which of course could be any other name) and all the content defined in the "expandedDetail" will always be displayed in tr "example-detail-row"

这篇关于如何在角度材料表中始终显示两种类型的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！