来自firebase的材料表数据源

Question

您好，我正在使用 angular 材料 5 和 angular 5 以及 angularFirebase2 版本 5。 我能够获取数据源并显示材料表，但是当我尝试从 firebase 列表中提取数据时，它不会在表中显示数据。

在我的组件内部：

public result;

dataSource = new MatTableDataSource(this.result);

constructor(private db : AngularFireDatabase) {
  this.result = this.db.list('sellEntries').valueChanges();
}

 <div class="example-container mat-elevation-z8">
            <div class="search-bar">
                <mat-form-field>
                    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                </mat-form-field>
                <button mat-raised-button color="primary" (click)="applyFilter('')">All</button>
                <button mat-raised-button color="primary" (click)="applyFilter('india')">India</button>
                <button mat-raised-button color="primary" (click)="applyFilter('south africa')">South Africa</button>
            </div>
                <mat-table #table [dataSource]="dataSource">



                    <ng-container matColumnDef="position">
                        <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
                    </ng-container>


                    <ng-container matColumnDef="material">
                        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.material}} </mat-cell>
                    </ng-container>


                    <ng-container matColumnDef="weight">
                        <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="country">
                        <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.country}} </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                </mat-table>
            </div>

如果我使用组件绑定，表格可以正常工作并加载数据。我正在寻找一种从 Firebase 实时数据库加载数据源的方法。提前致谢

Answer 1

正如 cmets 中所指出的，MatTableDataSource 的构造函数需要一个数组。您应该始终键入变量，以便您的 IDE 和构建过程让您了解此类摸索。两种方法，a) 扩展 DataSource 类：

class MyDataSource<T> extends DataSource<T> {
    constructor(private observable: Observable<T[]>) {}
    connect() {
        return this.observable;
    }
}
// Component: 
dataSource: MyDataSource<any>;
ngOnInit() {
    this.dataSource = new MyDataSource(this.db.list('sellEntries').valueChanges());
}

b) 订阅并手动设置数据：

destroy$:Subject<void> = new Subject();
ngOnInit() {
    this.dataSource = new MatTableDataSource([]);
    this.db.list('sellEntries').valueChanges().pipe(
        takeUntil(destroy$); // Complete & cleanup
    ).subscribe(data => this.dataSource.data = data);
}
ngOnDestroy() {
    this.destroy$.next();
}

就我个人而言，我会选择 a)，因为该类是可重用的并且使组件更精简。