*ngIf 不工作，仅当 ionic 页面发生变化时答案

【问题标题】：*ngIf not working, only when something change on ionic page*ngIf 不工作，仅当 ionic 页面发生变化时
【发布时间】：2018-10-18 07:12:35
【问题描述】：

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

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

page.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);
 }
}

我不知道为什么会这样，有什么想法吗？谢谢！

【问题讨论】：

您能否创建stackblitz.com 来展示您的问题？而声明this.loadingVisible = this.loadingVisible ? false : true;可以简写为this.loadingVisible = !this.loadingVisible
和变化检测有关，看看这篇文章：alligator.io/angular/change-detection-strategy
你可以试试changeDetectorRef.detectChanges() 吗？
非常感谢@ibenjelloun 和 Jacopo Sciampi，ChangeDetectorRef 成功了！

标签： angular ionic-framework angular-ng-if

【解决方案1】：

参考@Oscar Bustos 的回答，代码中的实际解决方案是这样的：

  constructor(private cd: ChangeDetectorRef) {}

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

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

【讨论】：

【解决方案2】：

感谢@ibenjelloun 和@JacopoSciampi 的解答

所以...

每当您的应用程序发生某些变化时，例如用户事件或从网络请求接收到的数据，Angular 都会对所有组件（从上到下）执行变化检测。变更检测非常高效，但随着应用程序变得越来越复杂和组件数量的增加，变更检测将不得不执行越来越多的工作。但是有一种方法可以规避这种情况，并将更改检测策略设置为特定组件上的 OnPush。这样做将指示 Angular 仅在向它们传递新引用而不是在数据发生简单变异时对这些组件及其子树运行更改检测。

成功了，现在一切正常！

【讨论】：

【解决方案3】：

问题

您的实现问题是尝试使用单个函数处理两种情况。使用此实现，您无法控制显示或隐藏元素。它会一直切换。

修复

幸运的是，它通过为不同的功能创建两个单独的函数来进行简单的修复。

 show(){
    this.loadingVisible = true;
 }

 hide(){
    this.loadingVisible = false;
 }

或

   show(showFlag:boolean){
     this.loadingVisible = showFlag;
   }

并根据您的要求调用适当的方法show 或hide。

切换？

你想切换你的状态然后你可以使用这条线

 toggleLoading(){
    this.loadingVisible = !this.loadingVisible;
 }

在html中

<button ion-button (click)='toggleLoading()'>click to show or hide</button>

【讨论】：

【解决方案4】：

实现切换的另一种方法（我认为更好的方法，至少对于您的情况而言）是像这样在您的 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)="loadingVisible = !loadingVisible">click to show or hide</button>
</ion-content>

所以在你的click 事件中loadingVisible 将收到与loadingVisible 的当前值相反的值，并且你的类中不需要方法。

【讨论】：