display async data in the angular view

Question

i am fetching the data form an API beck-end and displaying its content in to my view in angular,

for the service i am using observables

export class PropertyService {
  apiUrl: string = environment.domain;

  constructor(private http: HttpClient) {}

  private _propertyDetailedInfo = new Subject();
  propertyDetailedInfo$: any = this._propertyDetailedInfo.asObservable();
  updatePropertyDetailedInfo(data: any) {
    this._propertyDetailedInfo.next(data);
    this.propertyDetailedInfo$ = data;
  }


  gerPropertyDetailedInfo(id: string) {
    const res = this.http.get(`${this.apiUrl}/property?id=${id}`);
    res.subscribe((val) => {
      this.updatePropertyDetailedInfo(val);
      console.log(this.propertyDetailedInfo$);
    });
  }
}

and i am subscribing to it in the Component

export class PropertySpecsComponent implements OnInit {
  propertyInfo!: any; 
  constructor(private propertyService: PropertyService) {}
  ngOnInit() {
    
    this.propertyService.gerPropertyDetailedInfo('90949d476fb');
    this.propertyService.propertyDetailedInfo$.subscribe((res: any) => {
      this.propertyInfo = res;
      console.log(
        ` flexibleCancellation : ${this.propertyInfo.flexibleCancellation}`
      );
    });
  }
}

the console.log works and displays what i am looking and even can be displayed in the view with the pipe i am getting the value of TRUE for but is cant red the in ng-for

the code for it:

error i am getting:

i trayed to insert the data-object staticly and stored it in service (i did not use observebols) that works displaying the data using json pipe aslo works {{ propertyInfo.flexibleCancellation | json }}

but not for *ngIf="propertyInfo.flexibleCancellation"

using aysinc pipe dos not work for me

*ngIf="propertyInfo.flexibleCancellation | async" i get:

Async pipe requires an observable, then it subscribes to it and with the response you can do whatever you want inside the template. It looks like you're passing a boolean to the async pipe, that's why you're getting that error. — Shahar, Jun 14 '23 at 15:33
Add optional chaining "?." to the call of the property like propertyInfo?.flexibleCancellation or wrap your template parts that depends on the value of propertyInfo in an *ngIf="propertyInfo" — Mehyar Sawas, Jun 14 '23 at 15:43

score 1 · Accepted Answer · answered Jun 14 '23 at 15:50

1

using optional chaining is a solution no need to use async pipe

*ngIf="propertyInfo?.flexibleCancellation"

answered Jun 14 '23 at 15:50

ibrahimgb

693
5
13

score 1 · Answer 2 · answered Jun 14 '23 at 15:59

Problem Analysis

Probably the view of your component is rendered before the response of the observable is emitted. At that time the proprerty propertyInfo is undefined as it does not have an initial value. In your template the call of flexibleCancellation on propertyInfo leads to a javascript error, becasue propertyInfo is not yet defined.

Possible Solutions:

1- Use optional Chaining like in ibrahimgb's answer

*ngIf="propertyInfo?.flexibleCancellation"

2- Wrap the part of the template that depends on propertyInfo in an *ngIf

<ng-container *ngIf="propertyInfo">
...
</ng-container>

And display a loading spinner if the property is undefined

3- Set an empty object as initial Value for propertyInfo

propertyInfo: any = {};

score 1 · Answer 3 · answered Jun 14 '23 at 16:56

1

The view is getting rendered before the value of your propertyInfo variable is set. Checking whether that value is undefined using *ngIf will solve the issue hopefully.

answered Jun 14 '23 at 16:56

suppaGonzalo

107
1
9

display async data in the angular view

3 Answers3