Question

我很好奇如何在Angular中动态生成标题标签。让我为您解释整个场景。假设我有一个客户端-服务器设置，其中我能够以json的形式从服务器检索数据，并且在该数据中有一个名为“ size”的字段。现在，我想知道的是，有什么方法可以使用json中的大小数据动态生成标题标签？例如如果我从json数据中得到size：2，则相应的标题标签应为<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>

在标头标签模板中：

<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



    <!-- In .component.ts File -->
    public testHtml = '<h2>Hello</h2>'
    <!-- In Template File -->
    <div [innerHtml]="testHtml"></div>

动态生成标题标签

2 个答案: