Load data before show view

Ionic Framework ionic-v3
1 
export class FichaPage implements OnInit {
  propertyId: number;

  constructor(public navParams: NavParams) {
    this.propertyId = this.navParams.get('propertyId');
  }

  ngOnInit() {
    if(this.propertyId) {
      this.getPropertyById().then((data) => {
        this.property = data;
      })
    }

  }

  getPropertyById(){
     return new Promise((resolve) => {
       this.propertiesService.getPropertyById({ propsId: [this.propertyId], userId: null })
        .subscribe((data) => {
          resolve(data);
        })
     })
  }

i want to this.property be available in my view . I already put *ngIf in my wrapper div. But still doesn’t work.

2

What does your *ngIf and wrapper div look like? That solution should work.

As, you should be to reduce your getPropertyById() to:

getPropertyById() {
    return this.propertiesService.getPropertyById({ propsId: [this.propertyId], userId: null })
    .toPromise();
}
3 
ngOnInit() {
    this.getPropertyById().then((data) => {
      this.property = data;
    })

  }

  getPropertyById() {
      this.propertiesService.getPropertyById({ propsId: [this.propertyId], userId: null })
        .toPromise();
  }

If i use toPromise() i have an error in the then(Property then doesnt exist on type void).

this is my where i put my *ngIf:

<ion-content>
    <div *ngIf="property">
        <div class="name-price-container" style="min-height: 97px">
            <div>
                <h2 class="nombre animated fadeIn">
                    {{property.title}}
                </h2>
            </div>
        </div>
        <div class="caracteristicas">
            <div class="animated fadeIn">
                <div *ngIf='property.rooms' class="ambientes">
                    <span class="fa fa-home"></span>
                    <div>{{property.rooms}} Amb</div>
                </div>
                <div *ngIf="property.bedrooms" class="dormitorios">
                    <span class="fa fa-hotel"></span>
                    <div>{{property.bedrooms}} Dorm</div>
                </div>
                <div *ngIf="property.bathrooms" class="banos">
                    <span class="fa fa-tint"></span>
                    <div>{{property.bathrooms}} Baños</div>
                </div>
                <div *ngIf="property.parking" class="cocheras">
                    <span class="fa fa-car"></span>
                    <div>{{property.parking}} Cochera</div>
                </div>
                <div *ngIf="property.m2" class="metros">
                    <span class="fa fa-codepen"></span>
                    <div>{{property.m2}}m2</div>
                </div>
        
        </div>
        
</ion-content>
4

Try to set a Loader, so you can have total control of when things are going to show up

5

I solved it i didn´t notice that my data comes from the server like array so it was

gOnInit() {
    this.getPropertyById().then((data) => {
      this.property = data[0];
    })

  }

  getPropertyById() {
      this.propertiesService.getPropertyById({ propsId: [this.propertyId], userId: null })
        .toPromise();
  }

Thanks for the replies. Its solved.

6

I’m surprised the marked solution works. I didn’t think JavaScript had implicit function return.

1 Like