Angular Material Datatables - Firestore 中的数据源不会分页答案

【问题标题】：Angular Material Datatables - Data source from Firestore won't paginateAngular Material Datatables - Firestore 中的数据源不会分页
【发布时间】：2018-08-17 08:15:35
【问题描述】：

我从 firestore 中检索了一些数据并将其格式化为具有 InvoiceItem 类型的 Observable 数组。

数据正确加载到数据表，但分页器不会用数组的长度初始化，我认为这可能是由于数据被异步解析，但我不确定。

这对吗？

import { Component, OnInit, AfterViewInit, ViewChild, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import { Observable } from 'rxjs/Observable';

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

import { AuthService } from '../../services/auth.service';
import { InvoiceService } from '../invoice.service';

import { Invoice } from '../invoiceModel';
import { InvoiceItem } from '../invoiceItemModel';

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

export class ViewInvoiceComponent implements OnInit, AfterViewInit {

  userId: string;
  invoiceId: string;
  invoice: Invoice;
  itemsCollection: AngularFirestoreCollection<InvoiceItem>;
  items: Observable<InvoiceItem[]>;
  itemsData = new MatTableDataSource<InvoiceItem>();

  tableColumns = [
    'description',
    'quantity',
    'unitPrice',
    'subtotal',
    'taxCode',
    'tax',
    'total'
  ]

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private authService: AuthService, private invoiceService: InvoiceService, private db: AngularFirestore, private route: ActivatedRoute) {
    this.userId = this.authService.user.uid;

    this.route.params.subscribe(params => {
        this.invoiceId = params.id;
    })

    this.db.collection('/users').doc(this.userId).collection('/invoices').doc(this.invoiceId).ref.get().then(snapshot => {
        this.invoice = snapshot.data() as Invoice;
    })

    this.itemsCollection = this.db.collection('/users').doc(this.userId).collection('/invoices').doc(this.invoiceId).collection('/items');

    this.items = this.itemsCollection.snapshotChanges().map(changes => {
        return changes.map(a => {
            const data = a.payload.doc.data() as InvoiceItem;
            data.id = a.payload.doc.id;
            return data;
        })
    })

  }

  ngOnInit() {
    this.getItems().subscribe(data => {
        this.itemsData.data = data;
        this.itemsData.paginator = this.paginator;
        this.itemsData.sort = this.sort;
    })
  }

  ngAfterViewInit() {

  }

  getItems() {
    return this.items;
  }

}

【问题讨论】：

你好 Nick，请尝试在组件的 ngAfterViewInit 回调中设置一次分页和排序选项，并且只更新订阅中数据源的数据。
我以前试过这个，刚才又试了一次，但还是不行
好的，你能提供一个 plunker 或 stackblitz 来看看你的案例吗？

标签： angular typescript asynchronous datatable google-cloud-firestore

【解决方案1】：

出于某种原因，我似乎只能使用.valueChanges() 对实际集合本身进行分页和排序工作。尽管它可以对数据进行分页和排序，但您将无法检索文档 $keys。

ngAfterViewInit() {
    this.itemsCollection.valueChanges().subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
    });
}

【讨论】：