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

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: ''});
  }
}

它有两个错误：

单击 "Add person" 按钮时，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 中的选定值？

What is wrong with this Angular form that makes it reset selected values in the UI unexpectedly?

angular

angular4-forms