ngFor在mat select选项中包含对象的netsted数组

Question

我有一个带有选择选项的表单字段

<mat-form-field appearance="outline">
<mat-label>TestMat</mat-label>
<mat-select placeholder="TestMat"  [formControl]="testControl">  
<mat-option *ngFor="let arr of arrTmp" [value]="arr">
{{arr.name}}
</mat-option>           
</mat-select>   
</mat-form-field>

where arrTmp =

[
[{
"name": "name1",
"id": "1"
}],
[{
"name": "name2",
"id": "2"
}, {
"name": "name3",
"id": "2"
}]
]

因此在mat form字段中我有

[object Object]
[object Object],[object Object] 

如何正常显示arr.name ?

Answer 1

你需要为嵌套数组使用一个额外的for循环，请参阅下面的代码

<mat-form-field appearance="outline">
<mat-label>TestMat</mat-label>
<mat-select placeholder="TestMat"  [formControl]="testControl">
<ng-container *ngFor="let arr of arrTmp">
<mat-option *ngFor="let item of arr" [value]="item">
{{item.name}}
</mat-option>  
</ng-container> 
</mat-select>   
</mat-form-field>

Answer 2

你可以添加一个像span这样的元素，在第一个数组上添加一个ngFor循环，然后使用当前的ngFor对嵌套数组进行跳转。

所以这意味着要做这样的事情:

<mat-form-field appearance="outline">
<mat-label>TestMat</mat-label>
<mat-select placeholder="TestMat"  [formControl]="testControl"> 
<span *ngFor="let mainArr of arrTmp">
<mat-option *ngFor="let arr of mainArr" [value]="arr">
{{arr.name}}
</mat-option>           
</span>
</mat-select>   
</mat-form-field>