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 : 나는 P를 구현할 수 있었다

<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

스냅 샷 빌드 (npm install --save angular/material2-builds angular/cdk-builds)를 설치하고 MatTableDataSource를 사용하여 스냅 샷, 정렬, 정렬 및 필터링을 수행합니다. 이것을 사용하는 방법에 대한 예제 : https://material2-docs-dev.firebaseapp.com/components/table/examples