使用Firestore进行排序,分页和过滤的角度材料数据表
问题描述:
我目前有一个表中正在填充来自Firestore的数据。我在执行排序,分页和筛选时遇到了困难,我希望有人能够为我阐明这一点。以下是我的服务,组件和html。我看到了material.angular.io上的不同示例,但他们使用的示例数据库将我抛弃。使用Firestore进行排序,分页和过滤的角度材料数据表
服务:
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>
答
我能够实现p通过安装快照构建(npm install --save angular/material2-builds angular/cdk-builds)并使用MatTableDataSource进行混合,排序和过滤。有关如何使用此示例的示例:https://material2-docs-dev.firebaseapp.com/components/table/examples
您可能需要将DataSource更改为新的MatTableDataSource。 https://material2-docs-dev.firebaseapp.com/components/table/api#MatTableDataSource。务必升级到Angular 5和Material RC。我会把你的答案转交给S.O.对于Firebase而言,现在它们大多已经过时。我也在为今天的新设置而奋斗。当我找到一个解决方案,它不会帮助你,因为你有旧的表设置,似乎已被弃用。 – Preston
我目前正在使用Angular 5和“@ angular/material”:“^ 2.0.0-beta.12”,但它看起来像我需要使用快照构建(npm install --save angular/material2-构建angular/cdk-builds)以正确访问MatTableDataSource? – Kyle
我刚完成安装快照构建并使用MatTableDataSource实现了所有功能,它的功能就像一个魅力!非常感谢你! – Kyle