使用angular 7迭代HTML标签吗？ （动态地）

Question

有趣的是，它是一个动态组件，可以迭代html属性和样式。

我们知道[ngStyle]需要一个属性类型为css的json对象。

我还没有看到[ngAtrributes]需要一个带有属性的json对象的角度。

想法和目标是创建能够呈现的动态html元素。

约动态形式的思考是不是一个好主意，因为我将缺乏元件如一个div，IMG等

我尝试过这种方法：https://stackoverflow.com/a/48481199/9420442 很好，但是缺少一个，如何在标签内输入文本？例如：<div> Hello world! </ Div>我如何输入“ Hello world！”与此提案？

我要的主要是这个

HTML：

<{{tag.tagName}} *ngFor="let tag in tags"
                 [ngStyle]="tag.style"
                 [ngAtrr]="tag.atrributes">
                 {{tag.text}}
</{{tag.tagName}}>

TS：

this.tags = [
    {
      tag: 'div',
      atrributes: [
        {'class': 'text-center'}
      ],
      'style': [
        {'back-ground-color': 'red'},
        {'color': 'blue'}
      ],
      'text': 'Hello World!'
    },
    {
      tag: 'input',
      type: 'number'
      atrributes: [
        {'max': '10'},
        {'place-holder': 'hello hello!'}
      ],
      'style': [
        {'back-ground-color': 'red'},
        {'color': 'blue'}
      ],
      'value': '100'
    }
];

这是我的期望。 你能帮我如何实现这一功能一点？

<div class="text-center">Hello World!</div>

<input type="number" placeHolder="hello world" max="10" value="100"></input>

Answer 1

我认为应该用这种方式写

<div  *ngFor="let tag in tags">
  <{{tag.tagName}}
                 [ngStyle]="tag.style"
                 [ngAtrr]="tag.atrributes">
                 {{tag.text}}
  </{{tag.tagName}}>
</div>