Таблица угловых материалов с Firebase пуста, когда используется MatTableDataSource

Question

Когда я использую MatTableDataSource для своей таблицы для данных из Firebase, таблица пуста. Когда я сохраняю данные из Firebase в переменную, таблица отлично работает, я понятия не имею, что происходит, но я хотел бы использовать MatTableDataSource для простоты использования для сортировки, поэтому, если кто-то может указать, где я ошибаюсь Буду очень признателен, спасибо!

фрагмент HTML:

//This will have a populated table
//<mat-table #table [dataSource]="itemList">

//This will have an empty table
<mat-table #table [dataSource]="dataSource">

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

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

</mat-table> 

фрагмент кода ts:

itemList: Item[];
...
dataSource = new MatTableDataSource(this.itemList);

// Connect to firebase db with Item Service
constructor(private itemService: ItemService) { }

ngOnInit() {

    let data = this.itemService.getData();
    data.snapshotChanges().subscribe(item => {
        this.itemList = [];
        item.forEach(element => {
            let json = element.payload.toJSON();
            json["$key"] = element.key;
            this.itemList.push(json as Item);
        });
    });

}

Answer 1

Вы работаете с асинхронным программированием ваша подписка будет разрешена позже, и вы пытались инициализировать таблицу данных с данными, которые еще не были доставлены. вам нужно заполнить данные внутри обратного вызова subscribe, чтобы убедиться, что он инициализируется только после разрешения вашей подписки. Для лучшего понимания обратитесь к this .

// Connect to firebase db with Item Service
constructor(private itemService: ItemService) { }
 dataSource = new MatTableDataSource(Item[]);

ngOnInit() {

    let data = this.itemService.getData();
    data.snapshotChanges().subscribe(item => {
        this.itemList = [];
        item.forEach(element => {
            let json = element.payload.toJSON();
            json["$key"] = element.key;
            this.itemList.push(json as Item);
           this.datasource= new MatTableDataSource(this.itemList)
           //this.datasource.data=this.itemList;

        });
    });

}