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

Question

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

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

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

Answer 1

问题

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

修复

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

 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>

Answer 2

感谢@ibenjelloun 和@JacopoSciampi 的回答

所以...

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

有关详细信息，请参阅：

Understanding Change Detection Strategy in Angular

成功了，现在一切正常！

Answer 3

另一种实现切换的方法（我认为更好的方法，至少对你的情况而言）是在你的 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 当前值的相反值，并且您不需要 class 中的方法。

Answer 4

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

  constructor(private cd: ChangeDetectorRef) {}

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

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

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

*ngIf not working, only when something change on ionic page

angular-ng-if

ionic-framework

angular

问题

修复

切换 ?