angular - 带有 Angular Material 的 Angular 为4的可扩展表格行

您如何使行在角形 Material 表中可扩展？一个要求是我需要使用angular material table。我还希望将 Material Accordion 用于提供的信息here。

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

最佳答案

正如Andrew Seguin提到的here一样，这已经是开箱即用的:使用when谓词。

请参见以下示例:https://stackblitz.com/edit/angular-material-expandable-table-rows(向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>

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

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

从RC0 开始，第一个参数是索引:

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

如果要为每一行都有一个扩展 View ，则必须为每行添加一个由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)

关于angular - 带有 Angular Material 的 Angular 为4的可扩展表格行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46123854/