Angular 4中Bootstrap 4复选框绑定ngIf显隐功能失效求助

我来帮你排查下这个问题，看起来主要是几个细节没处理到位，咱们一步步来修正：

1. 修正*ngIf的判断逻辑 #

复选框通过ngModel绑定的是布尔值（true/false），而你当前的判断条件是和字符串'true'做比较，这就导致永远匹配不上。直接用布尔值判断即可：

<div *ngIf="Paso1.Acepta">
  <p>...</p>
</div>

2. 确保导入FormsModule #

使用[(ngModel)]双向绑定必须在你的Angular模块（比如AppModule）中导入FormsModule，否则指令会失效。在模块文件中添加：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入的模块（比如BrowserModule）
    FormsModule
  ]
})
export class AppModule { }

3. 检查组件变量的初始化 #

确认你的TypeScript组件中，Paso1对象和Acepta属性是布尔类型的初始化，而不是字符串：

export class YourComponent {
  // 初始化为布尔值false，默认不勾选
  Paso1 = { Acepta: false };
}

修正后的完整代码 #

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1" name="Situacion" [(ngModel)]="Paso1.Acepta">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

<div *ngIf="Paso1.Acepta">
  <p>现在勾选复选框，这段内容就能正常显示啦！</p>
</div>

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