Angular 11表，包含两个嵌套的可扩展行

Question

我很难实现一个包含两层嵌套可扩展行的表。
我遵循这个例子，我已经添加了第二级扩展，但它不起作用。在这里你可以找到我的作品。
基本上我想点击行"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的属性。