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

Question

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

Answer 1

在你的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 属性。