ngFor 无法与 ngModel 一起正常工作（angular 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 数组中使用单引号 ' 而不是双引号 "，它应该是这样的：

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

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

value="{{hero.name}}" OR [value]="hero.name" 和名字一样像这样：

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

3) 要使用 ngModel，您需要在 app.module.ts 的导入数组中包含 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>

希望这对您有所帮助。谢谢

ngFor 无法与 ngModel 一起正常工作（angular 5.1.2）

ngFor not working correctly with ngModel (angular 5.1.2)

angular

angular5