angular - mat-select中的Angular Material ngTemplateOutlet不起作用

Question

我有一个数据树结构，我想mat-options通过递归遍历树来填充。我认为使用它很容易实现，ngTemplateOutlet但由于某种原因，这会破坏mat-select绑定。垫子选项出现，当您单击它们时，它们的状态将变为“活动”，但它们不会绑定到mat-select对象（例如，单击不会关闭选择框）。

有没有办法实现我正在寻找的功能？另外，什么原理导致我看到的行为？

这是正在发生的事情的演示：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>

标签： angularangular-material