I have mat form field with option select
<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"
}]
]
as a result inside of mat form field i have
[object Object]
[object Object],[object Object]
how i can display arr.name normally?
You need to use one extra for loop for nested array, please see the below code
<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>