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

问题描述

如何使有角度的材料表中的行可展开?一个要求是我需要使用

解决方案

如前所述

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

</mat-row>

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

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"[@detailExpand]="row.element == expandElement ? 'expanded' : 'collapsed'"样式=溢出:隐藏"></mat-row>

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

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

自 RC0 第一个参数是索引:

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

如果你想对每一行都有一个展开的视图，你必须为每一行添加一个由 detailRow 属性标识的ExpansionDetailRow"，如下所示:

connect(): Observable{常量行 = [];data.forEach(element => rows.push(element, { detailRow: true, element }));返回 Observable.of(rows);}

如果您将 rows 变量记录到控制台输出，它将如下所示:

使用指令的完整示例

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

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.

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.

解决方案

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

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

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>

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');

Since RC0 the first param is the index:

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

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);
}

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

EDIT: COMPLETE EXAMPLE USING DIRECTIVE

Mat Table expandable rows (sorting, pagination and filtering)

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