整合垫表AngularFirestore

Question

我想垫桌子从https://material.angular.io/与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() { } 
    }