如何在 ngfor 循环中处理多个 p-dropdowns 的 ngModel答案

【问题标题】：How to handle ngModel for multiple p-dropdowns in a ngfor Loop如何在 ngfor 循环中处理多个 p-dropdowns 的 ngModel
【发布时间】：2022-11-17 19:57:29
【问题描述】：

我是第一次使用 Angular 14。我必须在我的子组件中显示动态数量的下拉菜单。实际上，父组件将决定子组件上有多少下拉菜单。父组件根据该数据发送一些数据，子组件将呈现下拉列表。但是屏幕上没有显示任何内容，并且控制台中出现错误错误类型错误：ctx_r0.bindedData 未定义.这是代码：

父母.ts

this.colors = [
  { name: 'Black', code: 'BLK' },
  { name: 'Red', code: 'RED' },
  { name: 'Green', code: 'GRN' }
];

this.cars= [
  { id: 1, name: 'Hyundai' },
  { id: 2, name: 'Toyota' },
  { id: 3, name: 'Mercedes' },
];

this.engine= [
  { id: 1, name: 'Petrol' },
  { id: 2, name: 'Diesel' },
  { id: 3, name: 'Electronic' },
];


this.data = [this.colors, this,cars, this.engine] // this array is sent to child compoennt

父组件.html

<app-child
    [data]="data">
</app-child>

子组件.ts

@Input() data: any[];

子组件.html

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

子组件.ts

bindedData: any[];

请纠正我的错误。

【问题讨论】：

标签： angular primeng

【解决方案1】：

只需进行一些更正，也许它会修复它。

首先，我们可以根据数据数组的大小将数组初始化为具有初始值。

bindedData: any[] = [null, null, null;

然后我们只需要设置 ngModel 来访问绑定数据列表（let i = index）的索引，目前我们正在使用数组的实际元素，这可能是问题的原因！

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

【讨论】：