将 mat-table 与 AngularFirestore 集成 [英] Integrate mat-table with 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() { }
    }

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