Лучше ли помещать директиву * ngFor в тег mat-select или тег mat-option?

Question

Рассмотрим два различных способа создания раскрывающегося списка выбора циновки с несколькими вариантами из массива (в данном случае optionList) в файле .ts.

Some.component. html

<!-- Place the *ngFor in mat-select-->
<mat-form-field>
  <mat-label>Dropdown</mat-label>
  <mat-select *ngFor="let option of optionList;"  [(value)]="selectedOption">
    <mat-option [value]="option">
      {{option}}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- Place the *ngFor in mat-option -->
<mat-form-field>
  <mat-label>Dropdown</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option *ngFor="let option of optionList;" [value]="option">
      {{option}}
    </mat-option>
  </mat-select>
</mat-form-field>

Кажется, что оба html-блока имеют одинаковую функциональность. Итак, есть ли лучший / стандартный способ работы? Имеет ли одно преимущество перед другим?

Спасибо

Answer 1

Оба HTML-блока имеют одинаковую функциональность

Нет, они не имеют одинаковую функциональность. Первый повторяет весь select, что приведет к множеству выпадений в пределах mat-form-field. Вам нужно только повторить элементы option, так что второй - это путь.

Есть ли одно преимущество над другим?

Хорошо ясноИсходя из вышеизложенного, мы можем заключить, что второй работает, а первый - нет.

Просто подключите эти блоки HTML в простой StackBlitz и назначьте массив для optionList ивы увидите, что первый не работает должным образом и дает странный результат.

Четыре элемента select создаются с тех пор, как я использовал optionList длины 4.

Заключение

Используйте второй HTML-блок и посмотрите документы ngFor.