Data has been retrieved from Firestore and transformed into an Observable array with the InvoiceItem type.
The data loads correctly onto the datatable, but there seems to be an issue initializing the paginator with the array's length. This could possibly be because the data is resolved asynchronously, although I'm not entirely certain about this.
Could you please confirm if my assumption is correct?
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;
}
}