带单选按钮的角度动态 html 绑定

Question

我从 API 获取 HTML 数据，这个 Html 有两个单选按钮和一些文本。在我的应用程序中，我通过 [innerHtml]="example|safeHtml" 将这个 Html 绑定在模态中，当我更改单选按钮选项时，我想在单击模态提交按钮时获取这些值。这是我的 HTML：

<div class="safeCustody-charge">
<p class="para1">This is to inform you that effective 1 September 2019</p>&nbsp;

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios1"  value="option1" checked="checked">
    <label class="form-check-label" for="exampleRadios1">
       <span style="color:red">Option 1:</span> I acknowledge the policy change
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios55"  id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
       <span style="color:red">Option 2:</span> I do not wish to pay
    </label>
</div>

Answer 1

由于您将 html 与 [innerHtml] 指令一起放入，因此您不能使用任何 Angular 机制来获取值。尝试使用 vanilla js 函数，例如

document.getElementById('exampleRadios1').value

您可能需要将返回元素强制转换为 HTMLInputElement 以进行类型检查。

就我个人而言，我不会从单独的资源中获取 HTML。相反，您可以从服务器返回一些 JSON，然后根据需要使用一些 *ngFor 逻辑来显示内容。