ホーム>source

テーブルには、テストオブジェクト配列を使用するときに想定されるデータが表示されていますが、テーブルで必要な実際のオブジェクト配列を使用している場合は表示されません。また、何が欠けているのかわかりません。

これはテスト配列です:

<前>ウィズウィズ <前>ウィズウィズ

...そして、会社だけを表示しようとすると、成功します

<前>ウィズウィズ

'sites'配列はデータベースから取得され、その値はOnInitに設定されます。

<前>ウィズウィズ

しかし、これはうまくいきません:

<前>ウィズウィズ

... this.sitesもオブジェクト配列ですが、TEST_DATA配列のように、各オブジェクトにはキー「company」のフィールドが含まれています。 私も export interface TestData { compa: string; company: string; } const TEST_DATA: TestData[] = [ {compa: 'blah', company: 'blahblahblah'}, {compa: 'blah2', company: 's'}, {compa: 'blah23', company: 's'}, {compa: 'blah234', company: 's'}, {compa: 'blah2345', company: 'fads'} ]; できますそしてそれは配列を返しますが、 displayedColumns = ['company']; dataSource = TEST_DATA; を設定すると 、次に <table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="company"> <th mat-header-cell *matHeaderCellDef> Company </th> <td mat-cell *matCellDef="let site"> {{ site.company }} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> を試してください空っぽです... これはバックエンドからデータを取得するコードです

ウィズウィズ

私は困惑しています...助けてください

sites: Site[] = [];
あなたの答え
  • 解決した方法 # 1

    NgOninit関数でそれを行う

    <前>ウィズウィズ

    そしてそれはバックエンドから取得しているコードはどこですか?サブスクライブする場合は、このコードがサブスクライブにあることを確認してください

  • 解決した方法 # 2

    に割り当ててみてくださいthis.dataSource 単なるdataSourceの代わりに、すなわち。 ngOnInit() { this.sitesService.getUtilitySites('Evansville'); this.sitesSub = this.sitesService .getSiteUpdatedListener() .subscribe((siteData: {sites: Site[]}) => { this.sites = siteData.sites; this.dataSource = siteData.sites; this.sitesLoaded = true; }); } を置き換える   dataSource = this.sites

  • 解決した方法 # 3

    -ChangeDetectorRefを試してください。時々、angularは更新されたデータを取得しません、

    <前>ウィズウィズ

    データソースへのバックエンドデータバインディングは、次のようにcd.detectChangesを追加します。

    <前>ウィズウィズ this.dataSource = this.sites

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ asp.net - Entity Framework Core Cascade Delete Error