Angular2中的动态DropDown不会填充数据

Question

我根据前一个下拉列表的输入值填充下拉列表，其中我一次一个地填充数组整数然后输入值我正在过滤动态下拉列表。

但是，一旦过滤按预期工作，但在更改下拉输入时，动态数据不会再次加载。

我甚至使用变化检测器参考，但没有发生变化。

以下是我的代码：

    @ViewChild('select1') select1: any; // reference variable for select

    getTheProductType(){
    var productTypeId = this.select1.value;
    this.productsAfterChangeEvent = this.allProducts.filter(p => p.typeId == productTypeId);
    this.changeDetectorRef.detectChanges();
    }

HTML：

    <select #select1 (change)="getTheProductType()">
      <option *ngFor="let p of checkedOutProducts">{{p.name}}</option>
    </select>

    <select #select2>
       <option>Pick a product...</option>
       <option *ngFor="let p of productsAfterChangeEvent">{{p.name}}
       </option>
   </select>

如何在angular2中执行此操作。

如果我第一次在select1下拉列表中选择数据时更改select1中的值，则无法加载数据我在第二次下拉列表中获取过滤后的数据但是当我再次更改数据时，没有发生任何更改。

任何帮助？

任何人都曾经这样做过？

先感谢您。

Answer 1

也许更改事件没有触发，因为您没有为选项设置值属性？

您可以尝试这样的事情（假设p.typeId是唯一的）：

<option *ngFor="let p of checkedOutProducts" [value]="p.typeId">{{p.name}}</option>

Answer 2

当我使用materializecss时，它对select元素的动态数据有初始化问题。因此，如果有人正在使用materializecss，则需要添加属性[materializeSelectOptions] =“dynamicDataArray”以重新初始化select元素。希望这有助于将来的任何人。