Question

我的html部分仅在consult.comeback时可见。在我的构造函数中，我调用

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;

  }
}

然后我的html看起来像这样：

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

奇怪的是，在我将consult.comeback的值更改为true后，该部分会显示（正如预期的那样），但一旦我将其更改回false，它就不会走开。

如何使用值进行可见性切换？

Answer 1

选项标记值是字符串，因此您的选项实际上是"true" "false"。所以*ngIf="'false'"在技术上是一个真实的条件。

您可以将* ngIf切换为

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

这是一个演绎这个的傻瓜。 https://plnkr.co/edit/YthqofKZP7LcG6zY0mVK?p=preview

角度2：没有删除ngif的内容

1 个答案: