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

Posted 2023-03-13

【中文标题】带单选按钮的角度动态 html 绑定

【英文标题】：angular Dynamic html binding with radio buttons

【发布时间】：2019-12-16 02:31:01

【问题描述】：

我从 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>

【问题讨论】：

您想要：用户选择了哪个单选按钮？

@PrashantPimpale 是的，我想获得选定的值

你可以使用[(ngModel)]

@PrashantPimpale 我们可以在这里使用 ngmodel 但无论如何，问题已经解决了

【参考方案1】：

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

document.getElementById('exampleRadios1').value

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

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

【讨论】：

嗨@Celsiuss，是的，我从服务器收到JSON响应以及属性主体，并且该属性具有Html，现在如果这是纯文本Html，它可以正常工作并且能够在UI上显示但我现在也有两个单选按钮，我想获取所选单选按钮的值，有什么想法吗？