如何使用 Angular Reactive Forms 动态检查单选按钮？

Question

快速提问。 我正在从数据库中获取数据，我想向用户显示数据，使用反应式表单（用户没有改变任何东西，这只是选择显示数据的 UI）我有一些布尔值：0 - 不， 1-是的。 我想在相应的单选按钮中显示这些值（1 个按钮表示是，1 个按钮表示否，正确的将被选中）如何将“已检查”属性动态添加到单选按钮组？ 下面添加了代码。 （这显然行不通）谢谢！

   <div class="d-flex">
    <label
      ><input
        type="radio"
        formControlName="fcw"
        class="ml-2"
        value="1"
        [checked]="vehicleData.fcw == 1 ? true : false"
      />כן
    </label>

    <label class="mr-5"
      ><input
        type="radio"
        formControlName="fcw"
        value="0"
        class="ml-2"
        [checked]="vehicleData?.fcw == 0 ? true : false"
      />לא</label
    >
  </div>

Answer 1

您可以创建一个布尔变量并将其设置为 true 或 false，具体取决于您是要选中还是取消选中按钮。在代码中，您可以这样做：

   <div class="d-flex">
<label
  ><input
    type="radio"
    formControlName="fcw"
    class="ml-2"
    value="1"
    [checked]="{{yourVariable}}"
  />כן
</label>

<label class="mr-5"
  ><input
    type="radio"
    formControlName="fcw"
    value="0"
    class="ml-2"
    [checked]="{{yourVariable}}"
  />לא</label
>

通过在组件中执行此操作，您应该有一个变量yourVariable并更改它的值。

Answer 2

您可以使用 Renderer2 setAttribute /setProperty 方法并在单选按钮上添加 @viewchildren 装饰器并获取单选按钮