ng与ngModel无法正常工作(角度5.1.2)

时间:2018-02-02 11:57:24

标签: angular angular5

我看到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>

结果:

超级英雄:死侍
超级英雄:雷神 超级英雄:超人
超级英雄:蝙蝠侠

谁能告诉我我做错了什么?

2 个答案:

答案 0 :(得分:2)

此处仅发出相同的input name

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

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

答案 1 :(得分:0)

你做错了。让我一步一步地告诉你如何修复:

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>

希望这会有所帮助。感谢