数据插值在 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>

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

如果我查看完整的对象 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();
          })));
}