Javascript 角度元素的排列属性>=6模板

我的密码里有这个

@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();
  }

}

@组件({
选择器：“通用输入”，
模板：``，
})
导出类GenericInputComponent实现OnInit{
@Input（'config'）config={placeholder:'Testability'，disabled:true，键入：'text'}；
控制
构造函数（）{}
恩戈尼尼特（）{
this.control=新表单控件（）；
}
}

我希望通过使用某种循环或其他方式来扩展config对象中的属性，以便呈现的html 详情如下:

<div><input placeholder='Testability', disabled=true type='text' [formControl]="control"/></div>

注意： 以下不是一个选项：

   <div><input [placeholder]='config.placeholder', [disabled]='config.disabled' [formControl]="control"/></div>

---

欢迎任何帮助和想法。谢谢。

1.添加模板变量：

<div><input #v [formControl]="control"/></div>

3.在其

nativeElement

属性中填充值：

const el = this.v.nativeElement
Object.keys(this.config).forEach(key => el[key] = this.config[key])

更新

完整的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]);
  }
}

@组件({
选择器：“我的应用程序”，
模板：``
})
导出类AppComponent{
@ViewChild（'v'）
v:ElementRef；
配置={占位符：'Testability'，disabled:true，键入：'text'}；
恩戈尼尼特（）{
const el=这个v.nativeElement；
Object.keys（this.config）.forEach（key=>el[key]=this.config[key]）；
}
}

@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]);
  }
}