Question

我在使用“ * 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);
 }
}

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

Answer 1

感谢@ibenjelloun和@JacopoSciampi提供的答案

所以...

每当应用程序由于用户事件或从网络请求接收到的数据而发生更改时，Angular都会对所有组件（从上到下）执行更改检测。变更检测非常有效，但是随着应用程序变得越来越复杂以及组件数量的增加，变更检测将不得不执行越来越多的工作。但是，有一种方法可以解决此问题，并将特定组件的更改检测策略设置为OnPush。这样做将指示Angular仅在将新引用传递给组件和它们的子树时（而不是简单地对数据进行突变时）对它们进行更改检测。

有关更多信息，请参见：

Understanding Change Detection Strategy in Angular

成功了，一切都很好！

Answer 2

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

  constructor(private cd: ChangeDetectorRef) {}

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

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

Answer 3

问题

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

修复

幸运的是，它通过为不同的功能创建两个单独的功能而具有简单的修复程序。

 show(){
    this.loadingVisible = true;
 }

 hide(){
    this.loadingVisible = false;
 }

OR

   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 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当前值的对数，并且您的类中不需要方法。

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

4 个答案:

问题

修复

切换？