Угловой материал ngTemplateOutlet в пределах mat-select Не работает

Question

У меня есть древовидная структура данных, и я хочу заполнить mat-options путем рекурсивного обхода дерева.Я думал, что это будет довольно легко реализовать с использованием ngTemplateOutlet, но по какой-то причине это нарушает привязку mat-select.Опции mat отображаются, и когда вы щелкаете по ним, их статус меняется на «активный», но в противном случае они не привязываются к объекту mat-select (например, нажатие не закрывает поле выбора).

IsЕсть ли способ добиться функциональности, которую я ищу?Кроме того, какой принцип вызывает поведение, которое я вижу?

Вот демонстрация того, что происходит: https://stackblitz.com/edit/angular-dvtq8h

А вот копия html компонента:

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option [value]="'a'">A</mat-option>
    <mat-option [value]="'b'">B</mat-option>
    <ng-container *ngTemplateOutlet="otherOptions"></ng-container>
  </mat-select>
</mat-form-field>


<ng-template #otherOptions>
    <mat-option [value]="'c'">Other</mat-option>
</ng-template>

Answer 1

Управление опцией mat из TypeScript дает больше гибкости:

TypeScript:

export class SelectOverviewExample {
  options: any = [
    {
      'value': 'c',
      'displayText' : 'other'
    }
  ];
}

HTML:

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option [value]="'a'">A</mat-option>
    <mat-option [value]="'b'">B</mat-option>
    <mat-option *ngFor="let option of options" [value]="option.value" >{{ option.displayText }}</mat-option>
  </mat-select>
</mat-form-field>