如何正确地将数据绑定到 Angular2 中的单选按钮？

Posted 2023-02-23

【中文标题】如何正确地将数据绑定到 Angular2 中的单选按钮？

【英文标题】：How correctly bind data to radio buttons in Angular2?

【发布时间】：2017-08-23 01:42:09

【问题描述】：

我有一个带有两个单选按钮的组件，html 看起来像：

<div class="btn-group"  id="ProfitCodes">
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           id="point1"
           name="ProfitCode"><small>description</small>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           [checked]="model.ForeignCompany.ProfitCode === 2"
           value="2"
           id="point2"
           name="ProfitCode"><small>description</small>
    </label>
</div>

当我单击保存并将模型发送到服务器时，我看到服务器端单选按钮的有效选定值。并且这个值没有错误地存储在数据库中。但是在绑定数据后不会检查具有适当值的单选按钮。 在 devTools 中，我看到了第一个单选按钮：

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

第二个单选按钮：

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

我看到角度改变了属性并等待第二个单选按钮被选中。但这不会发生。 我做错了什么？

【问题讨论】：

ngModel 和检查不一起工作，你必须删除其中之一。

【参考方案1】：

您不需要[checked]。试试[(ngModel)]。另外，请使用[value]="1" 而不是value="1"

  <input type="radio" name="Coverage" [value]="1" 
    [(ngModel)]="formdata.coverage_verified"  />Yes

【讨论】：

如果值是静态的，为什么要使用绑定？

在这种情况下，绑定常量值 1 使得输入值是一个数字（而不是字符串“1”）

【参考方案2】：

这适用于我的情况。我删除了[(ngModel)]

<div class="radio">
<label>
    <input type="radio"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           id="point1"
           (change)="onProfitSelectionChange(1)"
           name="ProfitCode"><small>description</small>
</label>
</div>
<div class="radio">
    <label>
        <input type="radio"
               value="2"
               [checked]="model.ForeignCompany.ProfitCode === 2"
               id="point2"
               (change)="onProfitSelectionChange(2)"
               name="ProfitCode"><small>description</small>
    </label>
</div>

TS 方法如下：

onProfitSelectionChange(entry): void 
    this.model.ForeignCompany.ProfitCode = entry;

【讨论】：

您还可以在所有单选按钮的包装 div 上侦听更改事件。然后可以通过$event.target.value 访问更改的值。这样可以避免为每个单选按钮重复 (change) 侦听器。

我尝试了很多不同的方法来让单选按钮使用 ngModel 直接绑定到数据源（就像我对复选框所做的那样），但没有一种方法对我有用，所以我不得不使用事件处理程序。

【参考方案3】：

试试看。

<ng-container *ngFor="let type of types">
   <label class="m-radio m-radio--bold m-radio--state-success">
      <input name="selectedType" [(ngModel)]="selectedType" [value]="type" type="radio">
           type.title
      <span></span>
   </label>
</ng-container>

【参考方案4】：

<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b> status.name | i18n </b>
</label>

【讨论】：

虽然您的代码可能作为答案正确，但详细说明您的代码的作用，它可以提高您的答案的质量。查看文章：How do I write a good answer?