1つのページに2つの角度データテーブルがあります。 Webサーバーからデータを取得しています(非同期)。 このための独立したコンポーネントを作成しました。 最初のテーブルは正しく表示され、ソートとページネータにバインドされていますが、2番目のテーブルは機能しません。データは表示されますが、ページ区切りとソートは2番目のテーブルでは機能しません。何が問題になると思いますか?
コンポーネントTSファイル:
displayedColumns = ['customerId', 'projectId'];
@Input() dataSource2 = new MatTableDataSource<ScheduledTest>();
private paginator: MatPaginator;
private sort: MatSort;
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.dataSource2.paginator = this.paginator;
}
@ViewChild(MatSort) set matSort(mp: MatSort) {
this.sort = mp;
this.dataSource2.sort = this.sort;
}
ngOnInit() {
this.getAllCurrentTestCases();
}
getAllCurrentTestCases() {
this.isError = false;
this.isLoading = true;
this.httpService.getAllCurrentTestCases(this.userService.accountNumber, this.userService.authToken)
.then((data: AutomatedTest[]) => {
this.isLoading = false;
this.dataSource2 = new MatTableDataSource<AutomatedTest>(data);
this.dataSource.sort = this.sort;
})
.catch(error => {
this.isError = true;
});
}
コンポーネントHTML:
<mat-table #table [dataSource]="dataSource2" matSort>
<ng-container matColumnDef="customerId">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<b> Customer ID </b>
</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.data.customerId | uppercase }} </mat-cell>
</ng-container>
<ng-container matColumnDef="projectId">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<b> Project ID </b>
</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.data.projectId | uppercase}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"
(toggleChange)="onToggleChange($event)"></mat-row>
<!-- <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow" [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
style="overflow: hidden">
</mat-row> -->
マイレンダリングページ
<app-table-com></app-table-com>
<app-table-com></app-table-com>
回答 1 件
関連記事
- 1つのdocker-composeファイルで複数のマルチコンテナアプリケーションを実行する
- 単一のGKE入力コントローラーで複数の入力リソースを持つことは可能ですか?
- 値の読み取りは、複数の列を持つ単一の行で優れています
- 1つの式で複数の正規表現が一致する
- 2つのテーブルとは異なる選択を含む複数の選択でテーブルに挿入します
- 同じ主キーを持つ複数のテーブルまたは1つのビッグデータテーブルがある方が良いですか?
- テーブルから単一の値を選択する
- オブジェクトのオブジェクトを単一のオブジェクトに組み合わせる方法Angular
- 複数のCSVファイルを処理し、PowerShellを使用して2つのセミコロン文字を含む単一の列の行を削除します
- 一度に複数のレコードをangularからjsonに更新する機能を追加するにはどうすればよいですか?
関連した質問
- mat-selectの選択された値に従ってmat-tableをソートします
- マット選択角度の配列から1つのオブジェクトのみを表示
- 動的に追加されたフォームフィールドの重複を検証する方法
- 切り替えた後、角度のあるアニメーションがマットタブ内で機能しない
- Angular mat-list-itemrouterLinkが機能しない
- IISでのAngularURLの問題
- サブスクライブのエラーコールバックからヘッダーを取得するにはどうすればよいですか?
- イベント完了後のAngular 5モデルの更新
- 角度:httpget応答はすべてのデータをロードしません
- Angular2マテリアルは、送信時にモデルとしてmat-selectを渡します
@ViewChild(MatSort)
を使用する代わりに@ViewChildren(MatSort)
を使用する 。 これはあなたにQueryList<MatSort>
を与えます 両方のMatSortインスタンスが含まれています。同じことを行って、MatPaginatorの両方のインスタンスを取得できます。
ViewChildrenとQueryListの詳細はこちら:https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e