angulartypescriptangular-materialmat-form-fieldmat-select

ngFor netsted array with objects in mat select option


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?


Solution

  • 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>