Angular 14中如何在*ngFor循环中为多个p-dropdown绑定ngModel

错误原因分析 #

1. bindedData仅声明未初始化，模板中访问bindedData[i]时触发undefined错误
2. *ngFor中let i of data的i是数组元素（比如colors数组）而非索引，用数组元素作为数组下标属于错误用法

具体修正步骤 #

1. 子组件初始化并同步绑定数据

修改child.component.ts，初始化bindedData并监听父组件传入的data变化，同步绑定数组的长度：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnChanges {
  @Input() data: any[] = []; // 给Input设置默认空数组，避免未传入时的undefined
  bindedData: any[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    // 父组件data变化时，同步更新bindedData长度，确保每个下拉框都有对应绑定值
    if (changes['data'] && this.data) {
      this.bindedData = Array(this.data.length).fill(null);
    }
  }
}

2. 修正模板循环与绑定逻辑

修改child.component.html，获取循环索引，用索引对应bindedData的位置：

<span class="col-md-2 me-2" *ngFor="let item of data; let idx = index" >
  <p-dropdown [options]="item" optionLabel="name" [(ngModel)]="bindedData[idx]" ></p-dropdown>
</span>

3. 可选：父组件数据初始化优化

父组件可确保data初始化为数组，避免初始状态的undefined：

data: any[] = [];

ngOnInit(): void {
  this.colors = [/* 原数据 */];
  this.cars = [/* 原数据 */];
  this.engine = [/* 原数据 */];
  this.data = [this.colors, this.cars, this.engine];
}

修正后说明 #

每个下拉框的选中值会对应存储在bindedData数组的对应索引位置，比如第一个下拉框的选中值存在bindedData[0]，第二个在bindedData[1]；ngOnChanges确保父组件更新data时，bindedData长度始终匹配，避免新增下拉框时绑定值未初始化的问题。

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