javascript - Angular/AngularFire2 Firestore - 初始化可观察集合

Question

我正在使用 Material 2，并且我正在尝试创建具有分页和排序功能的数据表，因此我需要我的集合可观察，但我认为我必须在 Controller 中错误地填充/初始化数组。

我一直使用下面的方法使用“费用”firestore 集合中的数据填充“费用”数组，但这总是显示“Type 'Observable<{}[]>”不可分配给类型'任意[]'"...

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';

import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';

import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

@Component({
  selector: 'app-expense-list',
  templateUrl: './expense-list.component.html',
  styleUrls: ['./expense-list.component.scss']
})

export class ExpenseListComponent implements OnInit, AfterViewInit {

  tableColumns = [ 'id' ];

  expenses: any[];

  constructor(private db: AngularFirestore) {
    this.expenses = this.db.collection('/expenses').valueChanges();
  }

  ngOnInit() {

  }

  ngAfterViewInit() {

  }

  viewExpense(row) {
    console.log('viewExpense(' + row.id + '): ', row);
  }

}

如何正确创建一个使用 Firestore 集合中的数据填充的 observable 数组？

Answer 1

这只是一个打字问题。如果更改 expenses 的类型至Observable<any[]>您的代码将编译。

基本上，您告诉 Typescript 您将保存一个简单的 Array expenses 中的任何内容属性(property)，但您实际上正在保存 Observable包含Array ( Obsevable<Array<any>> 或 Observable<any[]> )。

在此处了解有关泛型类型的更多信息:https://www.typescriptlang.org/docs/handbook/generics.html .