将垫子桌子与AngularFirestore集成

问题描述

我想将 https://material.angular.io/中的mat-table与angularfire2/firestore https://github.com/angular/angularfire2 ，有些想法，我很失落

I would like to integrate mat-table from https://material.angular.io/ with angularfire2/firestore https://github.com/angular/angularfire2, some idea, I am very lost

最诚挚的问候

推荐答案

这是用于简单表格的方法.

This is how you do it for simple table.

在您的html文件中放入它.

In your html file put this.

<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中放入

In your Javascript put this

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

这篇关于将垫子桌子与AngularFirestore集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！