質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

1回答

2500閲覧

mat-paginatorのonPaginateChangeイベントを抑止させたい

Recoba

総合スコア12

0グッド

0クリップ

投稿2019/02/19 08:24

編集2022/01/12 10:55

前提・実現したいこと

Angular2.0、mat-paginatorのonPaginateChange($event)"イベントで、
ダイアログを表示し、ページ遷移を抑止したい。
どなたか、解決策等をご教示ください。

発生している問題

dialog() で表示するが非同期となり、ページ遷移が走った後にダイアログが表示される。
期待値としては、ダイアログ表示後のボタンイベントでページ遷移を行いたいと思います。

該当のソースコード

Html

1<mat-paginator [pageSize]="api.mnpageSize" [length]="api.mnlength" [pageIndex]="api.mnpageIndex" [hidePageSize]="api.mnhidePageSize" showFirstLastButtons (page)="pageEvent = $event; onPaginateChange($event)"></mat-paginator> 2

TypeScript

1 // 次頁、前頁、先頭頁、最終頁ボタン押下イベント処理 2 onPaginateChange(event: any) { 3 this.dialog(); 4 this.selection.clear(); 5 let offset = 0; 6 offset = event.pageIndex * event.pageSize; 7 this.current_offset = offset; 8 this.current_pageSize = event.pageSize; 9 this.api.mnpageIndex = event.pageIndex; 10 this.onClickUpdate(); 11 } 12 13 dialog() { 14 let dialog = this.matDialog.open(CommonDialogComponent, { 15 'data': { 'title': 'ページ遷移します', 'content': 'よろしいですか?', 'button': "テスト" }, 16 'height': '237px', 17 'width': '480px', 18 'disableClose': true, 19 'autoFocus': true 20 }); 21 dialog.afterClosed().subscribe((result) => { 22 if (result == 'ok') { 23 } else { 24 } 25 }); 26 } 27 28

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こんにちは。
恐らくpaginatorでページ遷移をキャンセルすることは出来ないと思われます。
1つはAPI仕様にキャンセルする方法の記載が無い点です。またWEBフレームワーク側(angular material)でコントロールの細かい挙動制御を実装するには、状態保存するべき要素が多くなってしまうためオミットされているとも推測できます。

対策としてはpaginatorの採用をやめて、ボタンなどを配置してページング機能を自作する(表示用バッファを別途持って、ボタン操作で切り替えを行う)などです。
コードを見るとバッファ制御は行われているようですね。

ご参考までに。

投稿2019/02/22 03:18

BlueMoon

総合スコア1339

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Recoba

2019/02/22 05:37

ご回答、有難う御座います。 色々と検索しましたが、解決対応法等が見つからず質問をしました。 確かにAPI仕様にはキャンセル方法はありませんね。 今回、回答頂きましたページング機能の自作も考慮してみようかと思います。 参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問