マットテーブルがNgIfの内部にある場合、マットパジネータが壊れる

Question

angular mat-tableおよびmat-paginator特定のビューの場合、問題は、ビューにグリッドビューとトグル付きのテーブルビューがあり、グリッドビューがデフォルトであり、グリッドビューがアクティブなときにNgIfを使用してテーブルが非表示になることです。デフォルトをテーブルビューに設定すると、グリッドビューにスワップしない限り、ページ付けは正常に機能します。グリッドに設定されている場合、テーブルビューにスワップすると、ページ区切りが壊れます。このコードを実行するとテーブルが非表示になるので、私はそれを推測しています：

this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;

コンソールロギングを試しましたthis.sliceListおよびsliceList.paginatorは、グリッドビューがデフォルトの場合は未定義なので、これが問題であると思います。どうすれば修正できますか？

Answer 1

File.htmlに<div>を次のIDで作成します。

div id="dataFound" style="display:none;"
div id="dataNotFound" style="display:none;"

File.ts内

document.getElementById("dataFound").style.display = 'none';    /* ngIf = false     
document.getElementById("dataNotFound").style.display = 'inline'; /* ngIf = true