Data interpolation not working in Angular html template-CodePudding

I have a service that reads the data from Realtime Database
from product.service.ts:

getAll(){
    // Get All Products
    return this.db.list("/products").snapshotChanges();
  }

Which I use to read data in my products.component.ts:

products$:Observable<any>;
  
  constructor(productService : ProductService) {
    this.products$ = productService.getAll();
  }

But if I try and interpolate the values in my template it won't work. Doing

<div *ngFor = "let p of products$ | async">
    <div>
        title: {{p.title}}
    </div>
</div>

Will render: "title:" , with no actual value interpolated. What might the issue be?

If I look at the full object p, or even p.payload I can see that the data is loaded and correct, it just won't show

{{ p | json}}

and

{{ p.payload | json }}

both work as expected

CodePudding user response：

Try

constructor(productService : ProductService) {
    this.products$ = productService.getAll()
        .pipe(map( action => action
          .map(a => {
            return a.payload.val();
          })));
}