Таблица угловых материалов с данными Firebase - Paginator и Sort Show, но не работают - PullRequest
Новая
       10

Таблица угловых материалов с данными Firebase - Paginator и Sort Show, но не работают

0 голосов
/ 27 апреля 2018

У меня есть Angular Material Table с данными из базы данных Firebase, которая заполняется, как и ожидалось, однако, когда я пытаюсь следовать документам, чтобы добавить paginator и сортировать, они оба видимы (я вижу div и параметры paginator и анимированную сортировку при нажатии на заголовок), но не работает, т.е. сортирует или изменяет просмотренные элементы. Любые указатели на то, где я иду не так, будут оценены.

Фрагмент HTML: 

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> 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>

<mat-paginator 
    #paginator
    [pageSize]="10"
    [pageSizeOptions]="[5, 10, 20]"
    [showFirstLastButtons]="true"
>
</mat-paginator>

TS: 

import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

...

itemList: Item[];
displayedColumns = ['name', 'quantity', 'description', 'equippable', 'attunement', 'edit', 'delete'];
dataSource = new MatTableDataSource(this.itemList);

...

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

...


ngOnInit() {

    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    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);

    });

}

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

Если вы используете функцию для получения данных один раз, определите функцию следующим образом: Эта функция получает данные из Firestore. 

    async getAnimalData() {
        await this.animalRef.get().then(QuerySnapshot => {
          QuerySnapshot.forEach(QueryDocumentSnapshot => {
            console.log(QueryDocumentSnapshot.data().Gender_Type)
              this.herd.push(QueryDocumentSnapshot.data());
          })
    }).catch(error => {
      console.log(error);
    })
  }

Тогда в вашей функции ngOnInit () используйте: 

ngOnInit() {
    this.getAnimalData().then(val =>{
      this.dataSource = new MatTableDataSource(this.herd);
      setTimeout(() => {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      });
    });
}

Асинхронная функция вернет обещание, и .then будет оценена после завершения асинхронной функции. Надеюсь, это поможет!

0 голосов
/ 30 апреля 2018

Итак, я понял, что, поскольку я сохраняю данные Firebase в подписке, если я инициирую сортировку и разбиение на страницы, как в демоверсии, он не будет работать. Я должен начать сортировку и разбиение на страницы после установки подписки в ngOnInit следующим образом: 

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.sort = this.sort;
        this.dataSource.paginator = this.paginator;

    });
}
...