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

Posted 2023-03-13

【中文标题】角度材料选择不会检测到嵌套组件生成的选项的更改

【英文标题】：Angular material select doesn't detect changes to options generated by nested component

【发布时间】：2019-09-13 12:53:31

【问题描述】：

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

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

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

<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 个选项之一，它们会突出显示但不会被选中。

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

提前致谢。

【问题讨论】：

我认为问题在于选项没有绑定到选择器，因为它们被包装在额外的组件中。如果有办法将选项绑定到选择器，我想这会解决它 - 但这远远超出了我有限的知识范围。

***.com/questions/69034614/…

【参考方案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>

希望对你有帮助

【参考方案2】：

我检查了stackblitz，可以通过删除组件并将订阅中的每个对象添加到this.foods数组来解决。

从 app.component.html 中删除以下行

<option-generator [dataSource]="animalDataSource"></option-generator>

删除 option-generator.component.ts 文件（这会使您添加的包无用）

修改您的 app.component.ts

  ngOnInit() 
    // Emit values after a delay to prevent changedAfterCheck error.
    setTimeout(() =>  
      this.animalDataSource.next(this.animals);
    );

    this.animalDataSource.subscribe(data=> 
      let animals: Option[];
      animals = data;
      animals.forEach(animal =>  
        this.foods.push(animal);
      );
    );
  

查看fork to your stackblitz