Angular Material 选择不会检测嵌套组件生成的选项的更改

Question

我正在尝试将用于过滤和显示我的 mat-select 的 mat-option 的逻辑提取到它们自己的组件中。然而，出于某种原因，选项会显示，但点击它们不会触发事件。

我正在编写的网络应用程序有很多 mat-select，每个都可能有很多 mat-option。出于明显的原因，我需要一种方法来过滤选项，所以我使用 this node package .这种“使用搜索字段选择”的模式在整个应用程序中出现了很多，这就是为什么我想将它提取到一个组件中。

如果所有代码都包含在同一个组件中，它就可以正常工作。其结构如下所示:

<select>
  <option>
    <search>
  <option>
  ... more options

但是，由于我将搜索和选项过滤提取到它自己的组件中，现在在选择和它的选项之间有一个组件，如下所示:

<select>
  <component> // Notice extra component
    <option>
      <search>
    <option>
    ... more options

我已经建立了我能想到的最简单的例子来说明我如何使用选择: https://stackblitz.com/edit/select-option-generator

该示例不包含搜索栏，因为这不会影响行为。

当您单击包含在与选择相同的相同组件中的前 3 个选项之一时，它们会按预期被选中。如果您单击包含在选择内的嵌套 组件中的最后 3 个选项之一，它们会突出显示但不会被选中。

我试图找出为什么在单击嵌套组件中的选项时未选中它们。

提前致谢。

Answer 1

我遇到了同样的问题。我必须将选项呈现为树并递归地呈现组件。

我使用 ng-template

实现了它

<ng-container *ngFor="let item of items">
  <div *ngTemplateOutlet="optionsTree; context: {optionItem: item, isChild: false}"></div>
</ng-container>
<ng-template #optionsTree let-optionItem="optionItem" let-isChild="isChild">
  <mat-option [ngClass]="{'child-option': isChild}" [value]="optionItem.id">{{optionItem.name}}</mat-option>
  <ng-container *ngFor="let children of optionItem.children">
   <div *ngTemplateOutlet="optionsTree; context: {optionItem: children, isChild: true}"></div>
  </ng-container>
</ng-template>

希望对你有帮助