Question

我正在尝试提取用于过滤mat-option的{{1}}并将其显示在自己组件中的逻辑。但是由于某些原因，这些选项会显示出来，但是单击它们不会触发事件。

我正在编写的Web应用程序有很多mat-select，每个潜在地都有很多mat-select。出于显而易见的原因，我需要一种过滤选项的方法，因此我正在使用this node package。这种“使用搜索字段选择”模式在整个应用程序中都出现了很多，这就是为什么我要将其提取到组件中的原因。

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

mat-option

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

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

我已经建立了我想到的最简单的示例： https://stackblitz.com/edit/select-option-generator

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

当您单击与所选内容相同组件中包含的前三个选项之一时，它们将按预期被选中。如果您单击选中的嵌套组件中包含的最后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>

我希望它将对您有帮助

Answer 2

我检查了堆栈闪电，可以通过删除组件并仅将预订中的每个对象添加到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

角度材质选择无法检测到由嵌套组件生成的选项的更改

2 个答案: