使用Firestore進行排序，分頁和過濾的角度材料數據表

Question

我目前有一個表中正在填充來自Firestore的數據。我在執行排序，分頁和篩選時遇到了困難，我希望有人能夠爲我闡明這一點。以下是我的服務，組件和html。我看到了material.angular.io上的不同示例，但他們使用的示例數據庫將我拋棄。

服務：

import { Injectable } from '@angular/core'; 
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore'; 
import { Account } from './../models/account.model'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class AccountService { 
    accountsCollection: AngularFirestoreCollection<Account>; 
    accounts: Observable<Account[]>; 

    constructor(public afs: AngularFirestore) { 
    this.accountsCollection = afs.collection('accounts'); 

    this.accounts = this.accountsCollection.snapshotChanges().map(changes => { 
     return changes.map(a => { 
     const data = a.payload.doc.data() as Account; 
     data.id = a.payload.doc.id; 
     return data; 
     }); 
    }); 
    } 

    getAccounts() { 
    return this.accounts; 
    } 

} 

組件：

import { Account } from './../../../models/account.model'; 
import { Component, ViewChild, OnInit } from '@angular/core'; 
import { DataSource } from '@angular/cdk/collections'; 
import { MatPaginator, MatSort } from '@angular/material'; 
import { Observable } from 'rxjs/Observable'; 
import { AccountService } from '../../../services/account.service'; 

@Component({ 
    selector: 'app-account-table', 
    templateUrl: './account-table.component.html', 
    styleUrls: ['./account-table.component.css'] 
}) 
export class AccountTableComponent implements OnInit { 
    dataSource = new AccountDataSource(this.accountService); 
    displayedColumns = [ 
    'salesStep', 
    'status', 
    'idn', 
    'hospital', 
    'state', 
    'regionalManager', 
    'accountExecutive', 
    'clientLiaison', 
    'gpo' 
    ]; 

    constructor(private accountService: AccountService) {} 

    ngOnInit() { 

    } 

} 

export class AccountDataSource extends DataSource<any> { 

    constructor(private accountService: AccountService) { 
    super(); 
    } 

    connect(): Observable<Account[]> { 
    return this.accountService.getAccounts(); 
    } 

    disconnect() {} 

} 

HTML：

<div class="example-header"> 
    <mat-form-field> 
    <input matInput #filter placeholder="Search"> 
    </mat-form-field> 
</div> 

<mat-card class="example-container"> 

    <mat-table #table [dataSource]="dataSource" matSort> 

    <!--- Note that these columns can be defined in any order. 
      The actual rendered columns are set as a property on the row definition" --> 

    <!-- Sales Step Column --> 
    <ng-container matColumnDef="salesStep"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> Sales Step </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.salesStep}} </mat-cell> 
    </ng-container> 

    <!-- Status Column --> 
    <ng-container matColumnDef="status"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.status}} </mat-cell> 
    </ng-container> 

    <!-- IDN Column --> 
    <ng-container matColumnDef="idn"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> IDN </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.idn}} </mat-cell> 
    </ng-container> 

    <!-- Hospital Column --> 
    <ng-container matColumnDef="hospital"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> Hospital </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.hospital}} </mat-cell> 
    </ng-container> 

    <!-- State Column --> 
    <ng-container matColumnDef="state"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.state}} </mat-cell> 
    </ng-container> 

    <!-- Regional Manager Column --> 
    <ng-container matColumnDef="regionalManager"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> RM </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.regionalManager}} </mat-cell> 
    </ng-container> 

    <!-- Account Executive Column --> 
    <ng-container matColumnDef="accountExecutive"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> AE </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.accountExecutive}} </mat-cell> 
    </ng-container> 

    <!-- Client Liaison Column --> 
    <ng-container matColumnDef="clientLiaison"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> CL </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.clientLiaison}} </mat-cell> 
    </ng-container> 

    <!-- GPO Column --> 
    <ng-container matColumnDef="gpo"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header> GPO </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.gpo}} </mat-cell> 
    </ng-container> 



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"> 
    </mat-row> 
    </mat-table> 

    <!-- <div class="example-no-results" 
     [style.display]="dataSource.renderedData.length == 0 ? '' : 'none'"> 
    No accounts found matching filter. 
    </div> --> 

    <mat-paginator #paginator 
       [length]="(accountService.accounts | async)?.length" 
       [pageIndex]="0" 
       [pageSize]="25" 
       [pageSizeOptions]="[5, 10, 25, 100]"> 
    </mat-paginator> 
</mat-card> 

Answer 1

我能夠實現p通過安裝快照構建（npm install --save angular/material2-builds angular/cdk-builds）並使用MatTableDataSource進行混合，排序和過濾。有關如何使用此示例的示例：https://material2-docs-dev.firebaseapp.com/components/table/examples