将 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() { }
    }