使用 Angular 7 迭代 HTML 标签？ （动态）

Question

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

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

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

这个想法和目标是创建能够呈现的动态 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>