角度材料选择不会检测嵌套组件生成的选项的更改 [英] Angular material select doesn't detect changes to options generated by nested component

问题描述

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

I'm trying to extract the logic that filters and displays my mat-options for my mat-selects into their own component. For some reason however, the options get displayed but clicking on them doesn't fire an event.

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

The web app I'm writing have a lot of mat-selects which each potentially have a lot of mat-options. For obvious reasons, I need a way to filter the options so I'm using this node package. This pattern of "select with search field" appears a lot throughout the application, which is why I want to extract it into a component.

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

If all the code is contained in the same component, it works fine. The structure of this would look like this:

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

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

However, since I extract the search and option filtering into its own component, there's now a component between the select and its options like this:

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

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

I've set up the simplest example I could think of for how I'm using the select: https://stackblitz.com/edit/select-option-generator

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

The example doesn't feature the search bar since that doesn't affect the behavior.

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

When you click on one of the first 3 options which are contained in the same component as the select, they get selected as expected. If you click on one of the last 3 options which are contained in the nested component inside the select, they get highlighted but don't get selected.

我想弄清楚为什么嵌套组件中的选项在被点击时没有被选中.

I'm trying to figure out why the options in the nested component don't get selected when they're clicked on.

提前致谢.

推荐答案

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

I checked the stackblitz, and it can be solved by removing the component and just adding each of the object from the subscribe to the this.foods array.

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

1. Delete the following line from app.component.html

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

1. 删除 option-generator.component.ts 文件(这会使您添加的包变得无用)

1. Delete the option-generator.component.ts file (this renders the package you added useless)

修改您的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 到您的 stackblitz

这篇关于角度材料选择不会检测嵌套组件生成的选项的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！