Angular 5中如何为性别单选按钮绑定预填充数据及使用ngIf

嘿，我来帮你搞定这两个问题！刚好在Angular里处理过类似场景，给你一步步拆解：

一、实现性别单选按钮的预选中 #

首先你的GenderType是string类型，值'1'代表男性、'2'代表女性，这里要注意绑定变量的类型和单选按钮的value类型必须完全匹配，不然Angular的ngModel会匹配不上，导致预选中失效。

1. 组件类（Component）代码 #

先在组件里定义绑定变量，并初始化预填充值：

import { Component } from '@angular/core';

@Component({
  selector: 'app-gender-selector',
  templateUrl: './gender-selector.component.html'
})
export class GenderSelectorComponent {
  // 和你的GenderType保持一致，定义为string类型
  gender: string;

  constructor() {
    // 模拟从接口/父组件接收的预填充值
    this.gender = '1'; // 实际项目中替换为真实的预填充数据即可
  }
}

2. HTML模板代码 #

用[(ngModel)]绑定单选按钮，注意value要写成字符串形式的'1'和'2'（如果用[value]="1"会变成number类型，和string的gender不匹配）：

<div class="gender-group">
  <label>
    <input type="radio" name="gender" [(ngModel)]="gender" value="1">
    男性
  </label>
  <label>
    <input type="radio" name="gender" [(ngModel)]="gender" value="2">
    女性
  </label>
</div>

这样组件初始化时，gender的值是'1'，对应的男性单选按钮就会自动选中；如果预填充值是'2'，女性选项会被选中。

二、*ngIf的内联正确用法 #

你说用*ngIf没生效，大概率是条件判断的写法有问题，或者没放在正确的元素上。*ngIf是Angular的结构型指令，会直接添加/移除DOM元素，内联使用时直接写在元素标签上即可。

示例1：根据选中性别显示不同内容 #

比如在单选按钮下方，根据当前选中的性别展示提示文本：

<!-- 选中男性时显示 -->
<p *ngIf="gender === '1'">你选择了男性</p>
<!-- 选中女性时显示 -->
<p *ngIf="gender === '2'">你选择了女性</p>

示例2：内联控制按钮/元素的显示隐藏 #

也可以直接把*ngIf用在按钮、span等元素上，控制元素是否显示：

<!-- 只有选中性别后，确认按钮才会显示 -->
<button *ngIf="gender" type="button" class="confirm-btn">确认性别</button>

常见坑点提醒 #

• 条件判断里的变量要和组件内的变量名完全一致，Angular是区分大小写的
• 判断字符串时一定要加引号，比如gender === '1'，别写成gender === 1（你的gender是string类型）
• 不要把*ngIf和hidden属性混用：前者是移除DOM元素，后者只是隐藏元素，逻辑完全不同

内容的提问来源于stack exchange，提问作者K.Z