Динамически создавать тег заголовка

Question

Мне было интересно узнать, как динамически генерировать тег заголовка в Angular.Позвольте мне объяснить вам весь сценарий.Предположим, у меня есть настройка клиент-сервер, в которой я могу получить данные с сервера в форме json, и в этих данных есть поле с именем «размер».Теперь, что я хотел бы знать, так это то, что я могу динамически генерировать тег заголовка, используя данные о размере, которые есть в моем json?Например, если я получу размер: 2 из моих данных json, соответствующий тег заголовка должен быть <h2>.

<li *ngFor="let data from jsonData" [ngSwitch]="data.type" class="list-group-item">
    <h(what code should go over here to generate the heading accoring to the size parameter passed?) *ngSwitchCase="'SomeType'">{{data.text}}</h(?)>
</li>

Answer 1

Я не уверен, что вы можете сделать это.В качестве альтернативы вы можете создать отдельный компонент, который может генерировать соответствующий тег заголовка на основе параметров / условий, которые вы передаете ему.Например:

Предположим, у вас есть компонент с именем header-tag.

<header-tag [someType]="typeValue"></header-tag>

В шаблоне header-tag:

<h1 *ngIf="typeValue === h1">Some Text</h1>
<h2 *ngIf="typeValue === h2">Some Text</h2>
...

Answer 2

You can generate html as string and set it as innerHtml

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    <!-- In .component.ts File -->
    public testHtml = '<h2>Hello</h2>'

    <!-- In Template File -->
    <div [innerHtml]="testHtml"></div>