角度材质选择无法检测到由嵌套零部件生成的选项的更改 [英] Angular material select doesn't detect changes to options generated by nested component

问题描述

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

我正在编写的Web应用程序有很多mat-select，每个都有可能有很多mat-option.出于明显的原因，我需要一种方法来过滤选项，因此我正在使用此节点程序包.这种通过搜索字段选择"的模式在整个应用程序中都出现了很多，这就是为什么我要将其提取到组件中的原因.

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

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

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

谢谢.

解决方案

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

>

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

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

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

3. 修改您的 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);
      });
    });
  }
 

检查货叉到您的堆叠闪电战

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.

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

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.

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.

Thanks in advance.

解决方案

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. Delete the following line from app.component.html

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

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

3. Modify your 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);
      });
    });
  }

Check the fork to your stackblitz

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