ngFor netsted массив с объектами в опции выбора mat

Question

У меня есть поле матовой формы с возможностью выбора

где arrTmp =

      [
    [{
        "name": "name1",
        "id": "1"
    }],

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

]

в результате внутри поля формы мата у меня есть

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