Angular:最初のマットテーブルでのみソートするのはなぜですか? -- angular フィールド と sorting フィールド と angular-material2 フィールド 関連 問題

Angular : Why does sort only work on first Mat Table?












0
vote

問題

日本語

ここで展示されているソート機能があるのはなぜですか: https://material.angular。 .io /コンポーネント/テーブル/概要#並べ替え

は、2番目のテーブルを追加してデータの後半を表示するとすぐに失敗しますか? :

https://stackblitz.com / edit / angular~vg9gn-q1back?file=app/table-basic-example.ts

とどのように修正するのでしょうか。

英語

Why is it that the sort functionality advertised here : https://material.angular.io/components/table/overview#sorting

fails as soon as you add a second table to display the second half of your data? :

https://stackblitz.com/edit/angular-1vg9gn-q1back?file=app/table-basic-example.ts

and how would I fix it?

</div
        

回答リスト

1
 
vote

あなたのコードでは、 MatSort のインスタンスをデータソースに割り当てています。 sort メンバーは、角度がテンプレートに見つけることができる MatSort ディレクティブの最初のインスタンスです。

<事前> <コード> @ViewChild(MatSort) sort: MatSort; //1st sort directive ngOnInit() { this.dataSource.sort = this.sort; }

2つのテーブルの間のデータソースを共有しているので、最初のものだけが使用されます。

ソート、フィルタリング,.

などの操作をしたいのテーブル間でデータソースを共有することはできません。

解決策は、テーブルごとに1つのデータソースを持つことです。

 

In your code, you are assigning an instance of MatSort to your datasource. The sort member will be the first instance of MatSort directive that angular can find in the template.

@ViewChild(MatSort) sort: MatSort; //1st sort directive  ngOnInit() {   this.dataSource.sort = this.sort; } 

Since you are sharing the datasource between the 2 tables, only the first one is used.

You cannot share your datasource across tables in you want to do operations such as sorting, filtering,..

The solution is to have one datasource per table.

</div
 
 
 
 
0
 
vote
vote
ベストアンサー
 

素材は、それがリリースされると私の問題を解決するべきであることを理論的に解決する必要がある貼り付けヘッダーに彼ら自身のサポートをもたらしました: https://github.com/angular/material2/pull/11483

 

Material have brought their own support to stickying headers which should in theory solve my issue once it releases : https://github.com/angular/material2/pull/11483

</div
 
 

関連する質問

0  角材2ダイアログが暗く表示されます  ( Angular material 2 dialog appears darker ) 
私は角度2と角度材料2への新しいユーザーです、私はいくつかのチュートリアルの後にダイアログを生成しようとしていますが、表示ダイアログが暗く見えます。 href="https://i.stack.imgur.com/ynp5v.png" rel="nofoll...

11  インポートされたモジュールを持つAngular 2コンポーネントをテストする単位テスト  ( Unit testing angular2 component with imported module ) 
角度 - 素材2を使用するコンポーネントでテストを書いていますが、TestModule宣言に追加したときに取得します。 <事前> <コード> Error: Template parse errors: 'md-card-title' is not a ...

3  マット拡張パネル付きの角6マットナビゲーションリスト  ( Angular 6 mat nav list with mat expansion panel ) 
リスト項目としてMAT-of拡張パネルを持つMAT-NAV-LISTを作成しようとしています。 問題は、MAT-NAV-LISTが予想どおりに機能しません。整列は混乱しており、拡張パネルは正しく機能しません。私が思うように、これはMAT-NAV-Listsがリ...

19  MDリストアイコンまたはMDボタンは右に揃えられていますか? (角材2)  ( Md list icon or md button aligned to right angular material 2 ) 
マテリアル1:のように、ボタン/アイコン/チェックボックスを右に合わせた方法を任意にする方法 https://material.angularjs.org/latest/demo/list 私は現在(材料2)にあります: <事前> <コード> <m...

53  Angular Material - 無効なボタンにツールチップを追加する方法  ( Angular material how to add a tooltip to a disabled button ) 
ディレクティブ<コード> matTooltip が無効ボタンでは機能しないことに気付いた。どうやってそれを達成できますか? 例: <コード> <button mat-raised-button [disabled]="true" matTooltip="Yo...

1  マットテーブルの白いスペースを保存する  ( Preserve white spaces in mat table ) 
<事前> <コード> <div> <mat-table #table [dataSource]="dataSource" > <!-- Name Column --> <ng-container matColumnDef="name"> <mat-head...

2  コンポーネントコードによるAngular 2材料制御  ( Angular2 material control through component code ) 
!handle0 メソッドが呼び出されたときに、 start.toggle() MD-Sidenav-Layoutコンポーネントに属します。 MD-SIDENAVレイアウトの呼び出し方法<コード> !handle1 app.component.ts ?...

2  特定の角材料コンポーネントのスタイルの仕方は?  ( How do style a specific angular material component ) 
私は角材2を使用していますが、これは角材料1にも当てはまります。 角度のマテリアルタブを使用したいとしましょうが、タブを非表示にしたり、特定のスタイルを追加したりします。 だから私は次のHTML / Angular Materialコードを持っています: <事...

3  角質材料2毎月と年のDatePicker  ( Angular material 2 datepicker with only month and year ) 
私は、角質材料のDatePicker 2を年と月モードにのみ変更する方法を探していましたが、ドキュメントでそのオプションはありません。 StartViewを設定できますが、月または年が選択されている場合は、日モードに変更します。 <事前> <コード> <md...

37  角度素材2のアクティブなタブを取得する方法  ( How to get the active tab in angular material2 ) 
どのタブがアクティブになりたいです。 @ViewChild デコレータを使用し、そのようにそのように要素のプロパティにアクセスしようとしましたが、 null 。 成分: <事前> <コード> import {Component, OnInit, View...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有