Angular2动态下拉框二次切换后数据不加载问题求助

看起来你遇到的核心问题其实是第一个下拉框的value值获取错误，导致后续过滤逻辑根本没拿到正确的typeId，所以切换选项后第二个下拉框没变化。咱们一步步来修正：

1. 修正第一个下拉框的value绑定 #

你当前的第一个下拉框里，<option>没有显式设置value属性，Angular会默认把{{p.name}}作为option的value值。但你在getTheProductType()里拿this.select1.value去和产品的typeId做比较，这就相当于用产品名称去匹配类型ID，显然匹配不到数据，自然第二个下拉框不会更新。

修改第一个下拉框的HTML，给option加上[value]="p.typeId"：

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

这样选中某个产品类型时，select1.value就会拿到对应的typeId，过滤逻辑才能正确执行。

2. 简化逻辑（可选，更符合Angular风格） #

其实你可以不用@ViewChild，直接通过双向绑定ngModel来获取选中的typeId，代码会更简洁：

TS代码： #

selectedTypeId: number;
productsAfterChangeEvent: any[] = [];

// 初始化完整产品数组
ngOnInit() {
  // 假设这里已经加载了this.allProducts
}

getTheProductType(){
  // 直接用双向绑定的selectedTypeId过滤
  this.productsAfterChangeEvent = this.allProducts.filter(p => p.typeId === this.selectedTypeId);
  // 这里大概率不需要detectChanges()，Angular的变更检测会自动处理
}

HTML代码： #

<select [(ngModel)]="selectedTypeId" (change)="getTheProductType()">
  <option *ngFor="let p of checkedOutProducts" [value]="p.typeId">{{p.name}}</option>
</select>
<select #select2>
  <option>Pick a product...</option>
  <option *ngFor="let p of productsAfterChangeEvent">{{p.name}}</option>
</select>

3. 额外检查点 #

• 确认allProducts数组里的每个对象确实有typeId字段，并且和checkedOutProducts里的typeId类型一致（比如都是数字，不要一个是数字一个是字符串）
• 如果你确实需要手动触发变更检测，确保changeDetectorRef已经在构造函数中注入：

constructor(private changeDetectorRef: ChangeDetectorRef) {}

这样修改后，切换第一个下拉框的选项时，第二个下拉框应该就能正确加载过滤后的产品数据了。

内容的提问来源于stack exchange，提问作者mpunit30