我看到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>
结果:
超级英雄:死侍
超级英雄:雷神
超级英雄:超人
超级英雄:蝙蝠侠
谁能告诉我我做错了什么?
答案 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>
希望这会有所帮助。感谢