时间戳

首页 > 解决方案 > 角度材料选择不会检测到嵌套组件生成的选项的更改

angular - 角度材料选择不会检测到嵌套组件生成的选项的更改

问题描述

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

我正在编写的网络应用程序有很多mat-selects，每个都可能有很多mat-options。出于显而易见的原因，我需要一种过滤选项的方法，所以我使用了这个节点包。这种“使用搜索字段选择”的模式在整个应用程序中出现了很多，这就是我想将其提取到组件中的原因。

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

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

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

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

我已经为我如何使用选择设置了我能想到的最简单的示例： https ://stackblitz.com/edit/select-option-generator

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

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

我试图弄清楚为什么嵌套组件中的选项在单击时没有被选中。

提前致谢。

标签： angularangular-materialangular-material2angular-components

解决方案

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

我使用它实现了它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>

我希望它会帮助你

推荐阅读