angular - *ng如果不起作用，仅当 ionic 页面上发生某些变化时

Question

我在使用“*ngIf”时遇到问题，显然它什么都不做，但当 ionic 页面上发生某些变化时，例如，当单击输入时键盘显示或屏幕从纵向变为横向时它显示变化(隐藏/显示)我做了一个简单的例子:

页面.html

<ion-header>
  <ion-navbar>
     <ion-title>Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
   <div *ngIf="loadingVisible">
      <img src="assets/imgs/example.jpg" alt="">
   </div>

   <button ion-button (click)='showorhide();'>click to show or hide</button>
</ion-content>

页面.ts

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';


@IonicPage()
@Component({
   selector: 'page-new-table',
   templateUrl: 'new-table.html',
})

export class NewTablePage {

 public loadingVisible:boolean = false;

 constructor(public navCtrl: NavController){

 }

 showorhide(){
    this.loadingVisible = this.loadingVisible ? false : true;
    console.log(this.loadingVisible);
 }
}

我不知道为什么会这样，一些想法？谢谢!

Answer 1

引用@Oscar Bustos 的回答，代码中的实际解决方案是这样的:

  constructor(private cd: ChangeDetectorRef) {}

  refresh() {
    this.cd.detectChanges();
  }

您注入(inject) ChangeDetectorRef，然后在更新变量后调用 detectChanges 方法。