CODEWITHSUNDEEP
angularangular8
coolblue2000
coolblue2000

Reputation: 4888

Observable property displaying null in Angular 8

I have the following component

import { Component, OnInit } from '@angular/core';
import { DataService } from '../Services/data-service';
import { Observable } from 'rxjs';
import { ShowItem } from '../Models/show-item';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponent implements OnInit {

  public showString:Observable<ShowItem>;

  constructor(public datasource:DataService) { }

  ngOnInit() {
    this.getShow();
  }

  getShow()
  {
    this.showString = this.datasource.getShow();

    this.showString.subscribe(m=>{console.log(m);});

  }

}

and the following view

<p>show works!</p>
<p> {{showString|async|json}}</p>

This displays the following

show works!

{ "imageUrl": "testimage1.jpg", "showId": "063acbab-66d4-4459-882c-da26625b02ab" }

However if I change the view to

<p>show works!</p>
<p>{{showString.imageUrl|async|json}}</p>

I get

show works!

null

The viewModel is as follows

export class ShowItem {
    public imageUrl:string;
    public showId:string;
}

Why am I getting null for a property that is clearly there?

Upvotes: 4

Views: 289

Answers (1)

C.OG
C.OG

Reputation: 6529

You will need to access the imageUrl property after the async has resolved.

<p>show works!</p>
<p>{{(showString|async)?.imageUrl}}</p>

Notice the safe navigator operator (?.); this will avoid any errors on the template when trying to access the imageUrl property before the async call has resolved.

Also the |json pipe is removed as the imageUrl property is a string

Upvotes: 2

Related Questions