ngFor与ngModel不能正确工作(角5.1.2)

Question

我看到了ngFor和ngModel结合在一起的奇怪行为。下面是一个例子：

heroes = [
   {
      "name": "Deadpool"
   },
   {
      "name": "Thor"
   },
   {
      "name": "Superman"
   },
   {
      "name": "Batman"
   }
];

使用以下代码：

<div *ngFor="let hero of heroes;">
  <div class="row">
    <div class="input">
      <label>Superhero</label>
      <input [(ngModel)]="hero.name" name="hero">
    </div>
  </div>
</div>

结果：

超级英雄:蝙蝠侠

超级英雄:蝙蝠侠

超级英雄:蝙蝠侠

超级英雄:蝙蝠侠

然而，如果我不使用ngModel，而只是打印值，它就能正常工作：

<div *ngFor="let hero of heroes;">
  <div class="row">
    <div class="input">
      <label>Superhero</label>
      <span>{{hero.name}}</span>
    </div>
  </div>
</div>

结果：

超级英雄:死神

超级英雄:托尔

超人:超人

超级英雄:蝙蝠侠

有人能告诉我我做错了什么吗？

Answer 1

这里唯一的问题是输入相同的input name：

将name="hero"更改为name="hero{{i}}"

<div *ngFor="let hero of heroes;let i = index;">
  <input [(ngModel)]="hero.name" name="hero{{i}}">
</div>

Answer 2

你没做错什么。让我向你展示如何一步一步地修复：

1)在英雄数组中使用单引号‘而不是双引号“，应该如下所示：

heroes = [
    {
       'name': 'Deadpool'
    },
    {
       'name': 'Thor'
    },
    {
       'name': 'Superman'
    },
    {
       'name': 'Batman'
    }
 ];

2)要在输入字段中显示值，可以使用：

Value=“{hero.name}}”或value="hero.name“与名称相同，如下所示：

<input value="{{hero.name}}" name="{{hero.name}}">
<input [value]="hero.name" [name]="hero">

3)要使用ngModel，您需要在app.module.ts中的imports数组中包含FormsModule，并从‘@angular/forms’导入{ FormsModule }；如下所示：

import { FormsModule } from '@angular/forms';
imports: [
    BrowserModule,
    FormsModule
]

现在，两种方式的数据绑定可以工作：

<div *ngFor="let hero of heroes;">
  <div class="row">
    <div class="col-md-4">
      <div class="input">
        <label>Superhero</label>
        // Just show value in input
        <input value="{{hero.name}}" name="{{hero.name}}">
        // Another way to Just show value in input
        <input [value]="hero.name" [name]="hero.name">
        // This is our boy who make two way data binding easy
        <input [(ngModel)]="hero.name" [name]="hero.name">
        <div></div>
      </div>
    </div>
  </div>
</div>

希望这能有所帮助。谢谢