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'导入import {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>

希望这会有所帮助。感谢

ng与ngModel无法正常工作（角度5.1.2）

2 个答案: