* ng Если не работает, только когда что-то меняется на ионной странице - PullRequest
Новая
       35

* ng Если не работает, только когда что-то меняется на ионной странице

0 голосов
/ 18 октября 2018

У меня проблемы с "* 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);
 }
}

Я не знаю, почему это произошло, некоторыеидеи?Спасибо!

Ответы [ 4 ]

0 голосов
/ 27 января 2019

Что касается ответа @Oscar Bustos, реальное решение в коде таково: 

  constructor(private cd: ChangeDetectorRef) {}

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

Вы вводите ChangeDetectorRef, а затем, после обновления своей переменной, вызываете метод detectChanges.

0 голосов
/ 18 октября 2018

Спасибо @ibenjelloun и @JacopoSciampi за ответы

Итак ...

Angular выполняет обнаружение изменений во всех компонентах (сверху вниз) каждый раз, когда что-то меняется в вашем приложении отчто-то вроде пользовательского события или данных, полученных из сетевого запроса.Обнаружение изменений является очень эффективным, но поскольку приложение становится все более сложным и количество компонентов растет, обнаружение изменений должно выполнять все больше и больше работы.Однако есть способ обойти это и установить стратегию обнаружения изменений на OnPush для определенных компонентов.Это позволит Angular запускать обнаружение изменений в этих компонентах и ​​их поддереве только тогда, когда им передаются новые ссылки, а не только когда данные просто мутируют.

Для получения дополнительной информации см .:

Понимание стратегии обнаружения изменений в Angular

Все получилось, теперь все работает отлично!

0 голосов
/ 18 октября 2018

Еще один способ добиться переключения (и, думаю, лучше, по крайней мере, для вашего случая) - добавить встроенный переключатель в ваш 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, и вам не нужен метод в вашем классе.

0 голосов
/ 18 октября 2018

Issue

Проблема с вашей реализацией заключается в попытке обработать два случая одной функцией.В этой реализации вы не можете контролировать показ или скрытие элемента.Он всегда будет переключаться.

Исправить

К счастью, он имеет простое исправление путем создания двух отдельных функций для различной функциональности. 

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