数据插值在Angular html模板中不起作用

Question

我有一个从product.service.ts:读取实时数据库
数据的服务

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

我用来读取products.component.ts:中的数据

products$:Observable<any>;

constructor(productService : ProductService) {
this.products$ = productService.getAll();
}

但是，如果我尝试在模板中插入值，它将不起作用。进行

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

将呈现："；标题："，没有实际值插值。问题可能是什么？

如果我查看完整的对象p，甚至p.payload，我可以看到数据已经加载并且是正确的，它只是不会显示

{{ p | json}}

和

{{ p.payload | json }}

两者均按预期工作

Answer 1

尝试

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