如何将预填充数据从对象绑定到单选按钮 Angular 5

Question

我正在处理 Angular 5 应用程序。我得到了性别的单选按钮，它的值是基于它接收到的值预先填充的单选按钮，我需要知道如何在 html 模板中使用 ng-if inline。 GenderType：字符串，其中值 1 表示男性，2 表示女性。

我已经尝试过 *ngIf 但没有成功

 <div class="k-form-field">
     <span>Gender</span>
          <input type="radio" name="gender" id="female" class="k-radio" *ngIf:{{respondent.genderType='1'}} === checked="checked" disabled>
           <label class="k-radio-label" for="female">Female</label>

          <input type="radio" name="gender" id="male" class="k-radio" disabled>
             <label class="k-radio-label" for="male">Male</label>
  </div>

Answer 1

您不需要 ngIf 来更改属性的值。您可以只使用 javascript 块作为条件属性：

<input 
   type="radio"
   name="gender"
   id="female"
   [attr.checked]="respondent.genderType=='1' ? 'checked' : null" />

另一种选择是在 "Angular way" 中使用表单，或者使用 ngModel or with Reactive Forms.

Answer 2

假设 genderType 1 为女性，2 为男性，您只需在 checked 属性中绑定即可。你不需要 ngIf。 NgIf 是显示或隐藏一个 html 元素。试试这个（我也删除了禁用的属性）：

<div class="k-form-field">
     <span>Gender</span>
          <input type="radio" name="gender" id="female" class="k-radio" [attr.checked]="respondent.genderType === '1' ? 'checked' : null">
          <label class="k-radio-label" for="female">Female</label>

          <input type="radio" name="gender" id="male" class="k-radio" [attr.checked]="respondent.genderType === '2' ? 'checked' : null">
          <label class="k-radio-label" for="male">Male</label>
  </div>

Answer 3

适合我的最终答案

<div class="k-form-field">
    <span>Gender</span>
      <input type="radio" name="gender" id="female" class="k-radio" [attr.checked] ="respondent.genderType=='2' ? 'checked' : null" disabled>
      <label class="k-radio-label" for="female">Female</label>

       <input type="radio" name="gender" id="male" class="k-radio" [attr.checked] ="respondent.genderType=='1' ? 'checked' : null" disabled>
       <label class="k-radio-label" for="male">Male</label>
</div>

如何将预填充数据从对象绑定到单选按钮 Angular 5

how to bind Pre-populated data from object to radio button in Angular 5

angular-ng-if

angular