Angular 5插入动态输入属性

Question

我想向输入的 html 标记动态插入属性，但我不知道该怎么做：

我从组件方面得到了这段代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-transclusion',
  templateUrl: './transclusion.component.html',
  styleUrls: ['./transclusion.component.css']
})
export class TransclusionComponent implements OnInit {

  elements: any;

  constructor() { }

  ngOnInit() {
    this.elements = {};
    this.elements.name = 'TEST1';
    this.elements.type = 'text';
    this.elements.value = '12';
    this.elements.placeholder = 'PRUEBA';
    this.elements.maxlength = '10';

    // This is only for test elements keys
    for (const el in this.elements) {
      if (this.elements.hasOwnProperty(el)) {
        console.log(`${el}: ${this.elements[el]}`);
      }
    }
  }
}

这是我的模板方面：

<input  type="text"
        [attr.name]="elements.name"
        [attr.value]="elements.value"
        [attr.placeholder]="elements.placeholder"
        [attr.maxlength]="elements.maxlength"/>

我希望任何类似“forin”的方法迭代每个元素属性并在输入标签上动态插入，所以结果如下：

<input type="text"
       [attr.*for="el in elements"]="el"/>

我该如何实现？

最好的问候 安东尼奥

Answer 1

如果您想动态更改单个<input> 标签的属性，我建议您使用@ViewChild。例如，

import { Component, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-transclusion',
  template: `
    <input #foobar/>
    `,
  styleUrls: ['./transclusion.component.css']
})
export class TransclusionComponent implements AfterViewInit {

  @ViewChild('foobar') foobar: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    this.foobar.nativeElement.value = 'foobar';
    // change other values of element
  }
}

Answer 2

我刚刚用这个解决了它

import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-transclusion',
  templateUrl: './transclusion.component.html',
  styleUrls: ['./transclusion.component.css']
})
export class TransclusionComponent implements OnInit {

  elements: any;

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngOnInit() {
    this.elements = {};
    this.elements.name = 'TEST1';
    this.elements.type = 'text';
    this.elements.value = '12';
    this.elements.placeholder = 'PRUEBA';
    this.elements.maxlength = '10';

    const div = this.renderer.createElement('input');

    for (const el in this.elements) {
      if (this.elements.hasOwnProperty(el)) {
        this.renderer.setAttribute(div, el, this.elements[el]);
      }
    }
    this.renderer.appendChild(this.el.nativeElement, div);
  }

}

感谢所有@nikolaus 和@gab

Answer 3

如果您想使用属性来“配置”您的输入字段，您应该使用directives instad 的组件...
如果您需要修改您所在的本机元素正在应用您的指令，使用 angular 附带的 renderer service