Angular 5实现仅选中特定单选按钮时显示指定div

嘿，我来帮你搞定这个问题！你想要实现的是选中Nissan时才显示车辆类型选择器，核心就是把*ngIf的条件和单选按钮绑定的vehicles变量关联起来，我给你具体的修改方案：

第一步：给目标div加上正确的*ngIf条件 #

你只需要在包含ng-select的外层div上添加*ngIf="vehicles === false"（或者更简洁的*ngIf="!vehicles"，两者效果完全一样），修改后的代码如下：

<!-- 你的单选按钮组 -->
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="vehicles">
  <label ngbButtonLabel class="btn btn-secondary active">
    <input ngbButton type="radio" name="mode" [value]="true" > Toyota
  </label>
  <label ngbButtonLabel class="btn btn-secondary">
    <input ngbButton type="radio" name="mode" [value]="false"> Nissan
  </label>
</div>

<!-- 仅选中Nissan时显示的车辆类型选择器 -->
<div class="col-sm-4" *ngIf="!vehicles">
  <div class="form-group">
    <label class="control-label">Vehicle Type</label>
    <ng-select 
      [items]="vehicleTypes" 
      bindLabel="name" 
      bindValue="id" 
      [(ngModel)]="selectedVehicleTypesId"
    >
    </ng-select>
  </div>
</div>

第二步：确保组件类里的变量正确声明和初始化 #

别忘了在对应的组件.ts文件里声明vehicles变量，并且给它一个默认值（比如默认选中Toyota的话就设为true），示例代码：

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

@Component({
  selector: 'app-your-component', // 替换成你实际的组件选择器
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始化默认选中Toyota
  vehicles = true;
  selectedVehicleTypesId: any;
  // 这里是示例的车型数据，你可以换成自己的实际数据
  vehicleTypes = [
    { id: 1, name: 'Sedan' },
    { id: 2, name: 'SUV' },
    { id: 3, name: 'Truck' }
  ];
}

第三步：排查可能的坑 #

如果还是没生效，你可以检查这几个地方：

• 确认vehicles变量在组件里没有拼写错误，和模板里的[(ngModel)]="vehicles"完全一致
• 确保ng-bootstrap的NgbRadioModule已经正确导入到你的模块中（不然单选按钮的双向绑定可能失效）
• 打开浏览器控制台看看有没有报错，比如变量未定义、模块未导入这类问题

这样改完之后，选中Nissan时vehicles会变成false，*ngIf条件满足，车辆类型选择器就会自动显示；切回Toyota时就会隐藏啦。

内容的提问来源于stack exchange，提问作者geekcoder