Angular + Firebase: назначить наблюдаемый 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);
    });
  }