Question

我正在研究Angular问卷应用程序的一部分，我需要根据所请求问题的类型和结构动态生成角度html模板。例如，我收到三个问题，其中问题1是单选按钮选择器，问题2是多选择器，问题3是自由文本，因此在这个实例组件中读取3个不同类型的三个问题，并且应该相应地生成template.html。

我需要知道什么是实现此实现的最佳方法。

我能想到的一种动态生成html的方式，即广播，多重选择器和自由文本

数据来自Web API2 / .net核心

Answer 1

您可以使用*ngFor和*ngIf指令生成模板。使用*ngIf，您可以根据问题的类型（选择器，单选按钮...）显示或隐藏问题，使用*ngFor可以显示问题的数量。然后使用角度插值{{}}来显示信息。

如果这是您的模板：

<div *ngIf="radioButton" *ngFor="let r of radios">
    <radio-button>
        <option>{{ r.firstOption }}</option>
    </radio-button>
</div>

<div *ngIf="question" *ngFor="let q of questions">
    <div>{{ q.questionInfo }}</div>
</div>

在一个实例中，您会收到（来自服务）一个单选按钮选项，因此您只显示第一个div长度radios。其他情况会有所不同，具体取决于服务检索的信息。

如何基于接收API数据生成动态template.html

1 个答案: