将mat-table与AngularFirestore集成

Question

我想整合来自https://material.angular.io/的 mat-table 和angularfire2/firestore https://github.com/angular/angularfire2,有些想法,我很丢失

最良好的问候

Answer 1

这就是你如何为简单的表做的.

在你的html文件中放这个.

<mat-table [dataSource]="myData">

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>name</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef>description</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
    </ng-container>

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

</mat-table>

在你的Javascript中放这个

import { AngularFirestore} from 'angularfire2/firestore';

  export class MyComponent{
      displayedColumns = ['name', 'description'];    
      myData;

      constructor(private afs: AngularFirestore) {
        this.myData= new MyDataSource(this.afs);
      }

    }

    export class MyDataSource extends DataSource<any> {
      constructor(private afs: AngularFirestore) {
        super();
      }
      connect(): Observable<any[]> {
        return this.afs.collection('products').valueChanges();
      }

      disconnect() { }
    }