Question

如何在角度材质表中使行可扩展？一个要求是我需要使用angular material table。我还希望将材料手风琴用于所提供的信息here。

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

Answer 1

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

如果您希望每行都有一个展开的视图，则必须为每一行添加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)

Answer 2

开箱即用，但您可以使用一些自定义代码解决它。看看this discussion和this solution（不是来自我，但是这个答案的基础）。

简而言之：使用材质表并向行添加单击方法：

<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>

为展开区域添加组件。 row_detail.html包含扩展区域中的html。

@Component({
  selector: 'app-inline-message',
  templateUrl: 'row_detail.html',
  styles: [`
    :host {
      display: block;
      padding: 24px;
      background: rgba(0,0,0,0.03);
    }
  `]
})
export class InlineMessageComponent {
  @Input() content1: string;
  @Input() content2: string;
}

在表所在的组件中，您需要使用扩展行的方法。首先，将其添加到您的组件......

expandedRow: number;
@ViewChildren('myRow', { read: ViewContainerRef }) containers;

...然后添加方法：

/**
   * Shows the detail view of the row
   * @param {number} index
   */
expandRow(index: number, row: DataFromRowFormat) {

    if (this.expandedRow != null) {
      // clear old message
      this.containers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
    } else {
      const container = this.containers.toArray()[index];
      const factory: ComponentFactory<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1= "some text";
      messageComponent.instance.content2 = "some more text";
    }
}

Answer 3

当CDK是接近Material Table的唯一途径时，在常规表中使用md-row是一种可行的替代方法，但是由于@angular/material 2.0.0-beta.12已弃用CDK表，现在有自己的数据表，可能符合您的需求。请参阅以下文档：

https://material.angular.io/components/table/overview

Answer 4

这是使用Angular Material的方法。此示例包括分页，以及“名称”列上带有mat-sort-header的一个示例。我必须重写mat paginator并进行自定义排序，以确保可扩展行在排序时仍由其父级进行排序。此示例还允许您一次打开多行并关闭所有行

https://stackblitz.com/edit/angular-material2-issue-zs6rfz

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

4 个答案:

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