Ionic 3 * ngIf does not update the view

Question

Ionic 3 * ngIf does not update the view

Navigation

#1 by (0 votes)

0

I am working with Ionic 3. When I change the value of a variable in a component, the view is not updated in a page where it is integrated.

I have looked at many answers to similar questions but I do not know how to do it.

My code is this:

PAGE: home.html

<div *ngIf="getLoading()" text-center>
<img src="http://spcdn1.whichairline.com/1c40c0f0542d7227719eccd99bd71fd172d36e0a/images/loaders/loader-search.gif">
<h1><span>Loading...</span></h1></div>
<component-myList></component-myList>

home.ts

constructor(
public navCtrl: NavController,
public myList: myListComponent) {}

public getLoading() {
  return this.myList.loading;
}

COMPONENT: myList.ts

    @Component({
       selector: 'component-myList',
       templateUrl: 'myList.html'
    })



export class myListComponent {

  public loading: boolean = false;

  constructor() {}

  putLoading() {
    this.loading = !this.loading;
    console.log(this.loading);
  }
}

myList.html

<button color="secondary" (click)="putLoading()" ion-button right>Put Loading</button>

When I press the button nothing happens, that is, the home div is not shown, although the value does change by console.

Any ideas?

if ionic3 vistas

asked by jakama 19.02.2018 в 20:21

source

1 answer

I have problems with the transaction of a Fragments What is the Function of Class AbstractAction JAVASEE 7?

score 0 · Accepted Answer

Finally I got it with the events ...

I created in the home constructor:

 events.subscribe('actualiza', loading => {
     this.loadingLocal=loading;
 });

And in the component's constructor:

events.publish("actualiza", this.loading,1);

Each time I modify the load value in the component, I call the event:

events.publish("actualiza", this.loading,1);

And so the page finds out and renders again ...