Question

我正在Angular 4项目中工作，目前有一个* ngFor，在循环中，我们正在创建一个新表单（这样我最终可以使用2个或更多表单）

我遇到的问题是[[ngModel）]未绑定到数组键。

下面的代码示例：

新数组的定义：

public newItem：数组<{ category_id：数字，名称：字串， number_of_people_invited：数字， number_of_people_confirmed：号码 }> = [];

然后填写表格

<div *ngFor="let guestListItem of guestListItems; let i = index;">
    <form (submit)="doSubmit(i)" [name]="i">
    <ion-row ion-list>
        <ion-col size="6">
            <ion-item lines="none">
                <ion-input name="name"
                [(ngModel)]="newItem[i].name"
                style="border: none" type="text"
                placeholder="Family name"></ion-input>
            </ion-item>
        </ion-col>
        <ion-col size="6">
            <ion-item lines="none">
                <ion-input name="number_of_people_invited"
                [(ngModel)]="newItem[i].number_of_people_invited"
                type="tel" placeholder="No. Guests"></ion-input>
                <ion-button type="submit" end>Add</ion-button>
            </ion-item>
        </ion-col>
    </ion-row>
    </form>
</div>

正在得到的错误是：GuestListPage.html：20错误TypeError：无法读取未定义的属性“名称”

这是第20行：[（ngModel）] =“ newItem [i] .name”

Answer 1

您是否尝试过[(ngModel)]="newItem[i]?.name"

使用?之前，Angular不会评估newItem[i]，除非它不是null或undefined。

This comment很好地总结了?。

角度4 [（ngModel）]到数组对象

1 个答案: