如何基於接收到的API數據生成動態template.html

Question

我正在研究Angular問卷應用程序，其中我需要根據所請求問題的類型和結構動態生成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長度。 其他實例將有所不同，具體取決於服務檢索到的信息。