問題タブ [mat-table]

mat-table 内に mat-autocomplete コントロール (ほぼ 30k レコード) をバインドしています。ここで、ユーザーはオートコンプリートで値を変更し、マットテーブルを保存できます。

ユーザーがマットテーブルの複数の行でオートコンプリートコントロールで異なる値を選択して保存した場合。

mat-table を再バインドすると、mat-autocomplete で選択したすべての項目が mat-autocomplete の最後の値で表示されます。

しかし、ここではデータ ソース オブジェクトが適切に更新されています。

mat-autocomplete で値を更新して保存する

マットテーブル設定の最後の値を更新した後。[ここでは、データ ソースは問題なく、正しい値を持つ json オブジェクトです]

HTMLコード

マットテーブルはコンテナに配置され、タブコントロールに配置され、タブページをクリックすると、マットテーブルをロードしてバインドします

ページに複数のマットテーブルを表示するAngular 6アプリケーションがあります。json は次のようになります。

jobDocMetadata と jobStatusHistory のデータを同じページの 2 つの別々のマット テーブルに表示しようとしています。これは、残りのサービスからデータを取得するサービスです。

そして、これはこれまでのところ、オブザーバブルをサブスクライブするコンポーネント コードであり、正常に動作しています。

テンプレートサンプルはこちら。

オブザーバブルへのサブスクライブよりも優先されているため、非同期パイプを使用するようにこのコードを変更しようとしています。このために、データソースを Observable にバインドしようとしています。

私の質問は、2 つのデータソースを JobDetail の Observable にバインドする方法です。必要なデータは JobDetail 内にあるため、Observable をデータ ソースに直接バインドできませんでした。そこで、このマッピングを実現するために、JobDetail の Observable を JobDetail オブジェクト (jobDetailObs から jobDetail) に変換することを考えています。これが最善の方法ですか?もしそうなら、どうすればそれを達成できますか?

mat-tableangular 6アプリケーションで使用すると、水平スクロールの背景色を適切にmat-header-row設定できません。mat-rowCSS プロパティは、画面の表示部分にのみ適用されます。右にスクロールすると、色は割り当てられません。

テーブルには約 30 列あるので、必ず水平スクロールが必要です。

私のCSSは次のとおりです。

オーバーフロー プロパティを mat-h​​eader-row と mat-row に個別に設定しようとしました。背景色を解決しますが、ヘッダー行とデータ行は同期せずに別々にスクロールできます。

HTML ファイルは次のとおりです。

Deepuの回答に従うと、背景は次のように表示されます。

Angular 6 のマット テーブルにページネーションを追加しようとしています。以下のリンクの例をいくつか使用しています。しかし、それは機能していません:

https://material.angular.io/components/table/examples

マットテーブルにデータが適切に入力され、ページネーターがその下に適切に表示されるように見えますが、それらは互いに接続できていません:

ご覧のとおり、ページネーターは 1 ページあたり 5 レコードに設定されていますが、テーブルの現在のページには を超えるレコードがあります。また、0 のうち 0 も表示されます。これは、テーブルへのリンクに失敗したことをさらに示しています。

これが私のhtmlです：

これが私のtsコードです：

誰が私が間違っているのか教えてもらえますか?

ありがとう。

マット テーブルの列ヘッダーを編集し、新しい値を変数に格納する方法があるかどうかを知りたかったのです。これに対する満足のいく答えはどこにも見つかりませんでした。

TS ファイルから列を受け入れてデータをロードする汎用テーブルを作成しようとしています。

このエラーを取得:

ng:///AppModule/TableBasicExample.ngfactory.js:56 エラー エラー: ID "[object Object]" の列が見つかりませんでした。

コード：