Question

出于演示目的，我创建了这个简单的Angular应用，让用户可以列出人员列表：https://plnkr.co/edit/1RFGlXgHLwik02MvbhCz?p=preview

模板：

<form #peopleForm="ngForm">
<div *ngFor="let person of people">
   Name: <input type="text" name="name" placeholder="Name" [(ngModel)]="person.name">
 </div>
</form>

组件：

export class App {
  people = [
    {
      name: 'Bob',
    }, 
    {
      name: 'Alice',
    }
  ];

  constructor() { }

  addPerson() {
    this.people.push({name: ''});
  }
}

它有两个错误：

当＆＃34;添加人员＆＃34;时，在UI中重置列表项单击按钮
最后一个用户的名字显示两次

我也将基础JSON打印到页面上，它看起来是正确的，但UI的其余部分是错误的。谁能告诉我我做错了什么？

更新：出于某种原因，当我删除外部<form>标记时，它会按预期工作。谁知道为什么？

Answer 1

更新：ngModel无法正常工作，因为您尚未为输入定义唯一名称。试试这个

<div *ngFor="let person of people; let i=index">
   Name: <input type="text" name="name{{i}}" placeholder="Name" [(ngModel)]="person.name" >
   Gender:
   <select name="gender{{i}}" [(ngModel)]="person.gender">
     <option value=""></option>
     <option value="m">Male</option>
     <option value="f">Female</option>
   </select>
 </div>

Updated plunker

Answer 2

 <select name="gender" [(ngModel)]="person.gender">
 <option *ngFor="let value of person" [value]="value.gender">{{value.gender}}</option>

试试这个，这会使下拉动态。

这个Angular表单有什么问题让它意外地重置UI中的选定值？

2 个答案: