我的代码中有这个...
@Component({
selector: 'generic-input',
template: `<div><input [formControl]="control"/></div>`,
})
export class GenericInputComponent implements OnInit {
@Input('config') config = {placeholder: 'Testability', disabled: true, type: 'text'};
control;
constructor() { }
ngOnInit() {
this.control = new FormControl();
}
}
我想通过使用某种循环或其他方式来传播配置对象中的属性,以便渲染的 html
如下:
<div><input placeholder='Testability', disabled=true type='text' [formControl]="control"/></div>
Note:以下不是一个选项:
<div><input [placeholder]='config.placeholder', [disabled]='config.disabled' [formControl]="control"/></div>
欢迎任何帮助和想法。谢谢。
1.添加模板变量:
<div><input #v [formControl]="control"/></div>
2.Bind ViewChild
in ts:
@ViewChild('v')
v: ElementRef
3.在其中填写值nativeElement
财产:
const el = this.v.nativeElement
Object.keys(this.config).forEach(key => el[key] = this.config[key])
Update
完整的 component.ts 文件如下所示:
@Component({
selector: 'my-app',
template: `<div><input #v></div>`
})
export class AppComponent {
@ViewChild('v')
v: ElementRef;
config = { placeholder: 'Testability', disabled: true, type: 'text' };
ngOnInit() {
const el = this.v.nativeElement;
Object.keys(this.config).forEach(key => el[key] = this.config[key]);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)