Angular Mat Table with Nested objects
Angular Mat Table with Nested objects
我有一个这样设置的数据源
[
{
"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
},
]
}
]
我的问题是我需要为每个人设置一行,为每个城市设置一列 header。每个 'Houses' 的 object 对每个人来说都是一样的,但我不知道数据是什么,所以我不能自动设置 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>
仅吐出第一次迭代,不会继续嵌套 object,示例
|Full name |Denver|
|----------|------|
|Person One|True |
|Person Two|True |
我想要的地方
|Full name |Denver|Austin|
|-----------|------|------|
|Person One |True |True |
|Person Two |True |False |
如有任何帮助,我们将不胜感激。我使用获取每个不同城市的 foreach 循环自动填充显示的列,因此我没有 id 问题,只是一个填充问题。
谢谢。
查看下面的代码和完整的工作示例here:
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>
Class
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;
}
我有一个这样设置的数据源
[
{
"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
},
]
}
]
我的问题是我需要为每个人设置一行,为每个城市设置一列 header。每个 'Houses' 的 object 对每个人来说都是一样的,但我不知道数据是什么,所以我不能自动设置 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>
仅吐出第一次迭代,不会继续嵌套 object,示例
|Full name |Denver|
|----------|------|
|Person One|True |
|Person Two|True |
我想要的地方
|Full name |Denver|Austin|
|-----------|------|------|
|Person One |True |True |
|Person Two |True |False |
如有任何帮助,我们将不胜感激。我使用获取每个不同城市的 foreach 循环自动填充显示的列,因此我没有 id 问题,只是一个填充问题。
谢谢。
查看下面的代码和完整的工作示例here:
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>
Class
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;
}