带有嵌套对象的Angular Mat Table

Question

我有一个这样设置的数据源

[
{
"UserId": "00000000-0000-0000-0000-00000000",
"FullName": "Person one",
"Houses": [
{
"State": "Colorado",
"City": "Denver",
"Code": "C_D",
"Purchased": True
},
{
"State": "Texas",
"City": "Austin",
"Code": "A_D",
"Purchased": True
},
]
},
{
"UserId": "00000000-0000-0000-0000-00000000",
"FullName": "Person Two",
"Houses": [
{
"State": "Colorado",
"City": "Denver",
"Code": "C_D",
"Purchased": True
},
{
"State": "Texas",
"City": "Austin",
"Code": "A_D",
"Purchased": False
},
]
}
]

我的问题是，我需要为每个人设置一行，为每个城市设置一个列头。"房子"的每个对象对每个人来说都是一样的，但我不知道数据是什么，所以我不能自动设置matColumnDef.

我发现下面的

<table mat-table [dataSource]="dataSource" [trackBy]="myTrackById" fixedLayout recycleRows>
<ng-container [matColumnDef]="hb.FullName" *ngFor="let hb of HousingBlocks; let i = index">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef> {{hb.FullName}} </td>
</ng-container>

<ng-container [matColumnDef]="eventApproval.UserName" *ngFor="let hb of HousingBlocks; let i = index">
<div *ngFor="let house of hb.Houses[i];let i = index">
<th mat-header-cell *matHeaderCellDef> 
{{house.City}}
</th>
<td mat-cell *matCellDef> 
{{house.Purchased}}
</td>
</div>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

只输出第一次迭代而不继续嵌套对象，示例

|Full name |Denver|
|----------|------|
|Person One|True  |
|Person Two|True  |

Where I want

|Full name  |Denver|Austin|
|-----------|------|------|
|Person One |True  |True  |
|Person Two |True  |False |

任何帮助都会很感激。我用foreach循环自动填充显示的列，获取每个不同的城市，所以我没有id问题，只是一个人口问题。

谢谢。

Answer 1

参见下面的代码和完整的工作示例:

HTML

<table mat-table class="text-list" [dataSource]="dataSource">
<ng-container *ngFor="let column of displayedColumns; let first = first; let i = index" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<ng-container *ngIf="first">
<td mat-cell *matCellDef="let row">{{ row[column] }}</td>
</ng-container>
<ng-container *ngIf="!first">
<td mat-cell *matCellDef="let row">|{{ row.Houses[i-1].Purchased }}</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

类

export class AppComponent {
name = 'Angular ' + VERSION.major;
data = [
{
"UserId": "00000000-0000-0000-0000-00000000",
"FullName": "Person one",
"Houses": [
{
"State": "Colorado",
"City": "Denver",
"Code": "C_D",
"Purchased": true
},
{
"State": "Texas",
"City": "Austin",
"Code": "A_D",
"Purchased": true
},
]
},
{
"UserId": "00000000-0000-0000-0000-00000000",
"FullName": "Person Two",
"Houses": [
{
"State": "Colorado",
"City": "Denver",
"Code": "C_D",
"Purchased": true
},
{
"State": "Texas",
"City": "Austin",
"Code": "A_D",
"Purchased": false
},
]
}
];
displayedColumns = ['FullName', 'Denver', 'Austin'];
dataSource = new MatTableDataSource<any>([]);
ngOnInit(): void {
this.dataSource.data = this.data;
}