数据插值在 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();
          })));
}

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

Data interpolation not working in Angular html template

html

angularfire

firebase-realtime-database

angular