将 mat-table 与 AngularFirestore 集成 [英] Integrate mat-table with AngularFirestore
本文介绍了将 mat-table 与 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屋!
查看全文