具有角度材料的角度为4的可扩展表格行

看这个例子：https://stackblitz.com/edit/angular-material-expandable-table-rows(thx到Lakston)

在mat-table标签内部,您必须使用mat-row组件和matRipple指令.单击某行时,行元素将分配给expandedElement变量：

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

但现在我们必须添加我们的扩展行,默认情况下会隐藏,如果用户点击上面的行,则会显示：

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

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

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

由于RC0第一个参数是索引：

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

如果你想为每一行都有一个扩展视图,你必须为每一行添加一个由详细信息标识的“ExpansionDetailRow”,如下所示：

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

如果要将rows变量记录到控制台输出中,它将如下所示：

编辑：使用指令的完整示例

Mat Table expandable rows (sorting,pagination and filtering)