Angular + Firebase：分配 Observable<Object[]> 到 MatTableDataSouce<Object>

Question

我有一个带有 MatTableDataSource 的列表组件，我试图将它连接到来自 AngularFireStore 的集合。 我遵循了一些教程，其中访问“有效负载”在组件中。 我正在尝试将组件与 Firebase 规范隔离，以防我决定稍后更改后端。 我破坏了我的应用程序。

此外，一般来说这段代码是有效的，但错误让我很恼火，排序和分页都被破坏了。

我收到以下错误：

Type 'Observable<Cart[]>' is missing the following properties from type 
'MatTableDataSource<Cart>':_data, _renderData, _filter, _internalPageChanges, and 18 more.

在购物车服务中，我有以下类定义和构造函数（其余代码只是 CRUD 的东西）：

export class CartService {
  private cartCollection: AngularFirestoreCollection<Cart>;
  carts: Observable<Cart[]>;
  private cartDoc: AngularFirestoreDocument<Cart>;

  constructor(public db: AngularFirestore) {
    this.cartCollection = db.collection<Cart>('carts');
    this.carts = this.cartCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Cart;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
  }

....

在购物车列表组件中，我正在做...

export class CartListComponent implements OnInit, AfterViewInit {
   public filteredCarts = new MatTableDataSource<Cart>();

...

然后，

...
ngOnInit() {
  this.filteredCarts = this.service.carts; \\<- error lives here
}
...

Answer 1

@Powkachu 在他的评论中指出的方向是：您正在混合数据类型，而且您可能没有订阅服务返回。 尝试类似：

ngOnInit() {
    this.service.carts()
    .subscribe(res => {
      const data: Cart[] = res;
      this.filteredCarts = new MatTableDataSource<Cart>(data);
    });
  }