带有角材料的角度4的可扩展表格行 [英] Expandable table rows in angular 4 with angular material

问题描述

如何使行在角形材料表中可扩展?一个要求是，我需要使用角度材料表.我还希望在此处.

How would you make rows expandable in angular material tables? One requirement is that I need to be using the angular material table. I would also prefer to use the material accordion to the information provided here.

我想单击行，并为每列显示不同的信息.我正在寻找类似下面的内容.如果单击第1行，则第2行和第3行将显示不同的数据.

I want to click on row and show different information for each column. Im looking for something like below. If you click on row 1, rows 2 and 3 appear with different data.

推荐答案

如上所述在(由安德鲁·塞金(Andrew Seguin)撰写)中，这已经是可行的了:使用when谓词.

As mentioned here by Andrew Seguin this is already feasible out of the box: using the when predicate.

请参见以下示例: https://stackblitz.com/edit/angular- material-expandable-table-rows (thx到Lakston)

See this example: https://stackblitz.com/edit/angular-material-expandable-table-rows (thx to Lakston)

在mat-table标记内，您必须将mat-row组件与matRipple指令一起使用.当您单击一行时，该行元素将分配给expandedElement变量:

Inside of the mat-table tag you have to use the mat-row component with a matRipple directive. When you click on a row the row element will be assigned to the expandedElement variable:

<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row">
</mat-row>

但是现在我们必须添加扩展行，该行默认情况下是隐藏的，如果用户单击上面的行，则会显示该行:

But now we have to add our expanded row, that is hidden by default and will be shown if the user clicks on the row above:

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

重要的是已经提到的when谓词.这将调用在组件本身中定义的isExpansionDetailRow函数，并检查该行是否具有detailRow属性:

Important is here the already mentioned when predicate. This calls a isExpansionDetailRow function that is defined in the component itself and checks if the row has a detailRow property:

isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');

自RC0 起，第一个参数就是索引:

Since RC0 the first param is the index:

isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');

如果您希望每行都有一个扩展视图，则必须为每行添加一个由detailRow属性标识的"ExpansionDetailRow":

If you want to have an expanded view for every row, you have to add an "ExpansionDetailRow" identified by the detailRow property for every row like this:

connect(): Observable<Element[]> {
    const rows = [];
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    return Observable.of(rows);
}

如果将rows变量记录到控制台输出中，它将看起来像这样:

If you would log the rows variable to the console output, it will look like this:

Mat Table可扩展行(排序，分页和过滤)

这篇关于带有角材料的角度4的可扩展表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！