时间戳

首页 > 解决方案 > 具有两个嵌套可扩展行的 Angular 11 表

angular - 具有两个嵌套可扩展行的 Angular 11 表

问题描述

我很难实现具有两层嵌套可扩展行的表。
我正在关注这个示例，并且添加了第二级扩展，但它不起作用。
在这里你可以找到我的作品。
基本上我想点击“Street 1, 78542, Kansas”行并打开它，但我收到了类似未定义的错误。
错误在哪里？我只是将第一级可扩展行复制到嵌套级别。

标签： angularhtml-tablemat-tableangular11

解决方案

在你html这里

                    <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"
                        [class.example-element-row]="row.addresses?.data.length"
                        [class.example-expanded-row]="innerExpandedElement === row" (click)="toggleSecondRow(row)">
                    </tr>

这是因为row.addresses.data未定义。

您必须更新第 44 行

[class.example-element-row]="row.addresses?.data.length"

至

[class.example-element-row]="row.addresses?.data?.length"

更新

在

  toggleSecondRow(element: Address) {
    console.log('INNER ELEMENT ', element);
    element.addresses &&
    (element.addresses as MatTableDataSource<Address>).data.length
      ? (this.innerExpandedElement =
          this.innerExpandedElement === element ? null : element)
      : null;
    this.cd.detectChanges();
  }

您的对象(element.addresses as MatTableDataSource<Address>).data未定义。这就是为什么你有错误。如果要切换嵌套行，则需要将数据放入其中。

向console.log我们展示

INNER ELEMENT
addresses: Array[1]
  0: Object
    city: "Kansas"
    street: "Street 1"
    zipCode: "78542"
    __proto__: Object
  city: "Kansas"
  street: "Street 1"
  zipCode: "78542"
__proto__: Object

你element有addresses。但是没有addresses没有data属性。

推荐阅读