输入列表的 Angular Dynamic [*ngModel)]

Question

我正在尝试使用动态模型创建输入列表，但不幸的是，我陷入了如何正确实现这一点。

基本上，我在这里有示例.ts。对象数组的初始对象是苹果。

fruits: any[] = [
    {
        name1: 'Apple'
    }
]

在我的 UI 中，我创建了类似这样的内容：

<div *ngFor="let fruit of fruits; let i = index">
    <input type="text" [(ngModel)]="fruit.name[i]" />
</div>
    <button (click)="addNewInput()">Add new fruit</button>

当用户点击addNewInput()按钮时，它应该会自动添加一个新的输入。

但我收到一条错误消息，上面写着0 is undefined

对此或替代方法有任何帮助吗？

这里是 StackBlitz 链接：https://stackblitz.com/edit/angular-ivy-tbkzjw?file=src%2Fapp%2Fapp.component.html

Answer 1

您正在尝试访问 fruits['name'][0] -> 这与 fruits['name0'] 不同。

鉴于您使用的是 *ngFor，您不应该也需要使用索引位置。

fruits: any[] = [
    { name: 'Apple' },
    { name: 'Pear' }
]

<div *ngFor="let fruit of fruits; let i = index">
    <input type="text" [name]="'fruit' + i" [(ngModel)]="fruit.name" />
</div>
<button (click)="addNewInput()">Add new fruit</button>

您必须为每个输入添加一个不同的名称，但我已为此目的使用了索引。