ngModel 的一般绑定值
Generically Binding Values with ngModel
我只是在学习 Angular2,我一直无法解决的一个问题是使用 ngModel 创建表单时没有静态指定我绑定到的属性的名称。
我不确定克服这个问题的机制(虽然我确信它很常见)或者它在社区中是如何被提及的。
我的模板确实显示键和值,但它不反映保存时的更新。似乎以动态方式引用属性会导致绑定丢失。 (它是否在传输数据之前评估绑定属性?)
这是我卡住的地方:
模板:
<table class="table table-responsive">
<tr *ngFor="let prop of account | keyValues">
<td>{{ prop.key }}</td>
// Problem here:
// if I have [(ngModel)]="prop.key", it only displays the keys
// if I sub in a static attribute e.g. [(ngModel)]="account.accountName" it works
<td><input name="{{prop.key}}" [(ngModel)]="prop.value" /></td>
</tr>
</table>
管道:
@Pipe({
name: 'keyValues'
})
@Injectable()
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
组件:
... boiler plate ...
save(): void {
this.accountsService.update(this.account)
.then(() => this.goBack());
}
...
答案是使用Angular的Dynamic Forms
您还可以利用某些库,例如 PrimeFaces 的 PrimeNG 的可编辑数据表,我强烈推荐!
我只是在学习 Angular2,我一直无法解决的一个问题是使用 ngModel 创建表单时没有静态指定我绑定到的属性的名称。
我不确定克服这个问题的机制(虽然我确信它很常见)或者它在社区中是如何被提及的。
我的模板确实显示键和值,但它不反映保存时的更新。似乎以动态方式引用属性会导致绑定丢失。 (它是否在传输数据之前评估绑定属性?)
这是我卡住的地方:
模板:
<table class="table table-responsive">
<tr *ngFor="let prop of account | keyValues">
<td>{{ prop.key }}</td>
// Problem here:
// if I have [(ngModel)]="prop.key", it only displays the keys
// if I sub in a static attribute e.g. [(ngModel)]="account.accountName" it works
<td><input name="{{prop.key}}" [(ngModel)]="prop.value" /></td>
</tr>
</table>
管道:
@Pipe({
name: 'keyValues'
})
@Injectable()
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
组件:
... boiler plate ...
save(): void {
this.accountsService.update(this.account)
.then(() => this.goBack());
}
...
答案是使用Angular的Dynamic Forms
您还可以利用某些库,例如 PrimeFaces 的 PrimeNG 的可编辑数据表,我强烈推荐!