这是自角度2以来的一个丑角中的错误。它已经被跟踪了3年,而且似乎不会很快解决。症状是为输入字段动态分配“类型”而不触发指令,并且当前复选框类型根本不起作用,而数字似乎可以正常工作。 一些信息在这里:
https://github.com/angular/angular/issues/7329
https://github.com/angular/angular/issues/11716
https://github.com/angular/angular/issues/13243
如果有新消息出现,我将更新此帖子。
在对象内部使用对象键绑定模型时,复选框输入字段不会绑定到值。
我为此准备了示例项目: (可测试的项目:https://github.com/MingyaoLiu/SVG-Polygon-Util/tree/master/SVG-Poly-Util/src/app/test-page)
(该代码现在位于https://mingyaoliu.github.io/SVG-Polygon-Util/testPage的github页面上)
这是可以插入到空的angular 7项目中进行测试的代码。
.html
<button type="button" class="btn btn-warning" routerLink="/home">Go Back To Utility</button>
<div class="container">
<div class="row">
<div *ngFor="let objVal of objArray" style="padding: 10px">
<hr />
<label>{{obj[objVal].label}} input type ({{obj[objVal].inputType}}): </label>
<br />
<input [attr.type]="obj[objVal].inputType" [(ngModel)]="obj[objVal].value"
placeholder="{{obj[objVal].label}}" (ngModelChange)="onChange($event)" />
</div>
</div>
<div class="row">
<div *ngFor="let objVal of obj2Array" style="padding: 10px">
<hr />
<label>Test Group: </label>
<br />
<input type="checkbox" [(ngModel)]="obj2[objVal]" (ngModelChange)="onChange($event)" />
</div>
</div>
<hr />
<div>
{{ someInfo }}
</div>
</div>
.ts
export class TestPageComponent implements OnInit {
constructor() { }
obj = {
a: {
label: 'A',
inputType: 'number',
value: 1
},
b: {
label: 'B',
inputType: 'checkbox',
value: true
},
c: {
label: 'C',
inputType: 'checkbox',
value: false
},
};
obj2 = {
checkbox2: true
}
objArray = Object.keys(this.obj);
obj2Array = Object.keys(this.obj2);
someInfo = '';
ngOnInit() {
}
onChange(event) {
this.someInfo += event;
}
}