web-dev-qa-db-ja.com

観察可能な配列プロパティをAngular Material Tableデータソースとしてロードする方法は？

Rest APIからフェッチされた値を持つObservable配列プロパティがあります。

現在、ngForを使用して、標準のhtmlテーブルにデータを表示しています。

Angular Material Table（MatTableDataSource）に切り替えたいのですが、[dataSource]にObservableから取得したデータをロードするにはどうすればよいですか？

angularangular-materialobservable
6
OreoFanatics

どうぞ。これをハックしてください。私はprocessor.serviceを呼び出すサービスにオブザーバブルを持っていますが、それは同じコードを使用してすべてのテーブルを作成します。変数はコンポーネント内にあり、サービスに渡されます。

成分

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.');
        }
      );
  }

私のhtmlはngForではありませんが、役に立つはずです。その結果、ページ分割が必要な長いテーブルが作成され、おそらく目的の結果が得られます。

<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

ただ[dataSource]="Observable<ReadOnlyArray>"機能します。 commit feat（table）：データ入力を配列、ストリーム（＃9489）にすることができます はAngular 5.2のようです。今のところ、許可されているタイプは DataSource<T> | Observable<ReadonlyArray<T> | T[]> | ReadonlyArray<T> | T[] 。

2
lk_vc

カスタムDataSourceを作成するか、MatTableDataSourceを使用する必要があります。

こちら を参照

0
Cedric