Question

您好我使用角度材料5和角度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

正如评论中所指出的，MatTableDataSource的构造函数正在期待一个数组。您应该始终键入变量，以便您的IDE和构建过程可以让您了解此类的fumblings。两种方法，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），因为该课程可以重复使用，并使组件更加精简。

来自firebase的材料表数据源

1 个答案: