web-dev-qa-db-fra.com

Comment charger la propriété du tableau observable en tant que source de données Angular Material Table?

J'ai une propriété de tableau observable avec la valeur extraite de l'API Rest.

Actuellement, j'utilise ngFor pour afficher les données dans le tableau html standard.

Maintenant, je veux basculer dans Angular Material Table (MatTableDataSource). Comment charger le [dataSource] avec les données que j'ai des Observables?

angularangular-materialobservable
6
OreoFanatics

Voici. Hack loin à cela. J'ai l'observable dans un service que j'appelle processor.service et il utilise le même code que celui utilisé pour remplir toutes mes tables. Les vars sont dans le composant et sont transmis au service:

composant

private dbTable = 'members';  // The table name where the data is.
private dataSource = new MatTableDataSource();

private displayedColumns = [
    'firstName',
    'lastName',
...]

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
 }

// ------ GET ALL -----

  private getAllRecords() {
    return this.mainProcessorService.getAllRecords(
      this.dbTable,
      this.dataSource,
      this.paginator,
      );
  }

processor.service

  getAllRecords(dbTable, dataSource, paginator) {

    dataSource.paginator = paginator;

    // Populate the Material2 DataTable.
    Observable.merge(paginator.page)
      .startWith(null)  // Delete this and no data is downloaded.
      .switchMap(() => {
        return this.httpService.getRecords(dbTable,
          paginator.pageIndex);
      })
      .map(data => data.resource)  // Get data objects in the Postgres resource JSON object through model.

      .subscribe(data => {
          this.dataLength = data.length;
          dataSource.data = data;
        },
        (err: HttpErrorResponse) => {
          console.log(err.error);
          console.log(err.message);
          this.messagesService.openDialog('Error', 'Database not available.');
        }
      );
  }

Mon html n'est pas ngFor mais devrait être utile. Les résultats créent un long tableau qui nécessite une pagination et accomplit probablement ce que vous voulez.

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

        <ng-container matColumnDef="firstName">
          <mat-header-cell fxFlex="10%" *matHeaderCellDef> First Name </mat-header-cell>
          <mat-cell fxFlex="10%" *matCellDef="let row"> {{row.first_name}} </mat-cell>
        </ng-container>


        <ng-container matColumnDef="lastName">
          <mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
          <mat-cell fxFlex="10%" *matCellDef="let row">  {{row.last_name}} </mat-cell>
        </ng-container>
...
6
Preston

Juste [dataSource]="Observable<ReadOnlyArray>" travaux. Le commit feat (table): permet à l'entrée de données d'être un tableau, stream (# 9489) semble à Angular 5.2. Pour l'instant, les types autorisés sont DataSource<T> | Observable<ReadonlyArray<T> | T[]> | ReadonlyArray<T> | T[] .

2
lk_vc

Vous devez soit créer un DataSource personnalisé, soit utiliser le MatTableDataSource.

Voir ici

0
Cedric