Question

我试图在用户点击复选框时使用ngModel和ngIf指令显示内容。但它不起作用。

  <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 == 'true'">
    <p>...</p>
  </div

在我的TS中我有这个对象

  Paso1:Object={
  Municipio: null,
  Provincia: null,
  CCAA: null,
  Longitud: null,
  Anchura: null,
  Acepta: true,
  }

我做错了什么？

Answer 1

Paso1.Acepta是一个布尔变量，但您需要将其与'true'条件中的字符串ngIf进行比较。

将您的条件更改为"Paso1.Acepta"以检查真实价值：

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

要显式检查布尔值true，请使用严格相等并删除引号：

<div *ngIf="Paso1.Acepta === true">

Answer 2

没有比较只需添加变量。

 <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>

Angular 4上的Bootstrap 4复选框

2 个答案: