角度为 4 的可扩展表格行，带有角度材料答案

【问题标题】：Expandable table rows in angular 4 with angular material角度为 4 的可扩展表格行，带有角度材料
【发布时间】：2021-06-15 00:59:03
【问题描述】：

如何使有角材料表中的行可扩展？一项要求是我需要使用angular material table。我也更喜欢根据here提供的信息使用材料手风琴。

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

【问题讨论】：

你想在哪里显示信息？

标签： angular angular-material

【解决方案1】：

正如 Andrew Seguin 提到的here，这已经是可行的：使用when 谓词。

请参阅此示例：https://stackblitz.com/edit/angular-material-expandable-table-rows（感谢 Lakston）

在mat-table 标记内，您必须使用带有matRipple 指令的mat-row 组件。当您单击一行时，该行元素将分配给 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)

【讨论】：

有没有办法在单个单元格中获取索引，以便只有该单元格是可点击的？另外，这个when 解决方案非常好！我正在注入一个从 API 检索其他数据的详细信息组件，所以我不确定这在这里是否有意义。
没关系。我看到您可以在单元格定义中直接执行let row; let index = index 来接收行属性。
@David 这是一个分页、排序和过滤的例子：stackblitz.com/edit/…（感谢shlomiassaf）。它使用了另一种比上例更适合这种情况的方法。
这个方案很遗憾不支持分页和排序！
我收到以下错误：TypeError: Cannot read property 'sticky' of undefined

【解决方案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";
    }
}

【讨论】：

这对我有用，我想是因为我正在使用自定义数据源，非常感谢
这是我正在寻找的东西，它适合我的需要。谢谢:)
我喜欢这个解决方案，创建一个比上面@Philipp Kief 显示的解决方案更好的动态组件（我们称之为一个动态行）。动态行解决方案开始在分页和排序方面引起一些麻烦，因为它弄乱了表格的行。这个解决方案，动态组件，还使您能够轻松地使用您通常会使用的组件执行其他所有操作。
在expandRow方法的else块末尾添加this.expandedRow = index
查看这个stackblitz，在每次点击创建和销毁动态组件时实现动画

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：