Итерировать теги HTML с угловым 7?(Динамически) - PullRequest
Новая
       29

Итерировать теги HTML с угловым 7?(Динамически)

0 голосов
/ 01 февраля 2019

Интересно то, что это динамический компонент, который может повторять атрибуты и стиль html.

Мы знаем, что [ngStyle] нужен объект json со свойствами типа css.

Iне видел в угловом выражении [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>

1 Ответ

0 голосов
/ 01 февраля 2019

я думаю, что так должно быть написано 

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