角度2：带有ngif的内容未删除

Question

I have a section of my html to only be visible if consult.comeback . In my constructor I call

export class InviteConsultModal {
  @ViewChild(Slides) slides: Slides;
  consult: any = {};
  employees: any = [];

  constructor( private viewCtrl: ViewController, private storage: Storage, private params: NavParams) {

    this.consult.comeback = false;

  }
}

and then my html looks like so:

<ion-item>
  <ion-label floating>Is this a comeback?</ion-label>
  <ion-select required name="comeback" [(ngModel)]="consult.comeback">
    <ion-option value="true">Yes</ion-option>
    <ion-option value="false">No</ion-option>
  </ion-select>
</ion-item>
<ion-item>
  <!-- displays correct value -->
  {{consult.comeback}}
</ion-item>

<!-- initially is NOT shown -->
<ion-item *ngIf="consult.comeback">
  <ion-label floating>Original Sale</ion-label>
  <ion-select [(ngModel)]="consult.original" name="original">
    <ion-option *ngFor="let employee of employees" [value]="employee.id">{{ employee.name }}</ion-option>
  </ion-select>
</ion-item>

The strange thing is that after I change the value of consult.comeback to true , the section appears (as expected), but once I change it back to false , it does not go away.

How can I make the visibility toggle with the value?

Answer 1

option tag values are strings so your options are really "true" "false" . So *ngIf="'false'" is technically a true condition.

You could switch up the *ngIf to

<ion-item *ngIf="consult.comeback === 'true'">
</ion-item>

Here is a plunkr demoing this. https://plnkr.co/edit/YthqofKZP7LcG6zY0mVK?p=preview