問題タブ [mat-table]

マットテーブルのボタンをクリックした後、行を非表示にしようとしています。どこに置けばいいのかわからない*ngIf。試着しましng-containerたが、うまくいきません。以下は私のHTMLファイルです。

Angular マット テーブルを使用して列をグループ化する方法を理解しようとしています。これから始める方法がわかりません。どこにも例が見つからないようです。最初の 2 つのセクションは、次の図のようにグループ化する必要があります。

angular 6、firebase、material angular を使用しています。データをテーブルにロードしたり、並べ替えたり、ページネーターを使用したり、グローバルにフィルター処理したりできます

「名前」列のみをフィルタリングし、「共通」列をフィルタリングするための 2 番目のフィルタ フィールドを持つように、フィルタを変更したいと思います。

採用する戦略について教えていただけますか？

私はAngular 7.3.8アプリに取り組んでおり、Angular Materialライブラリを使用しています. NgOnInit サイクルを介してデータを使用してコンポーネントを初期化できますmat-tableが、何らかの関数を介してデータを使用してテーブルを更新しようとすると、UI が更新されません。

すでに NgZone を使用して UI を強制的に更新しようとしましたが、まだ機能していません。

テンプレートのコードは次のとおりです。

そして、更新機能は次のとおりです。

ログには dataSource 配列が更新されていることが示されますが、UI には新しい値が表示されません。

<mat-table>オプションの名前を表示するために a を使用したいのですが、それに対応する指定された値です (ユーザーが変更するため)。オプションは別の方法 (スライド トグルやマット選択など) で値を設定する必要がある場合があるため、データソースなしでこれを書き留める必要があります (または、少なくとも私が見つけることができる限り、1 つはできません)。 typescript ファイルで事前に作成された html タグを使用します)。

したがって、私の MWE は次のようになります。

しかし、自分のページを見ると、文字列のない行が表示されているだけです。<mat-card>このテーブルを a (またはむしろ)内で使用したいのですが<mat-card-content>、その外で試しても、行だけが得られ、他には何もありません。これは、マット カード内で次のように表示されます。

テーブルを正しく表示するにはどうすればよいですか?

*編集: * 頼まれたので、ここにも .ts ファイルがあります。

これは最小限の作業例よりも少し多いので、少し説明します。

• 私のオプションの 1 つは解像度です。mat-select
• これmat-selectは、次のように html ファイルに定義されています。
• これには、配列mat-selectで定義されているように、事前定義された値が与えられますresolutions

• もう 1 つのオプションは、単純にフルスクリーンを選択することですmat-slide-toggle(ただし、これはまだ完全には実装されていません)。

  <mat-select #resolutionSelect fxFlex="200px"> <mat-option *ngFor="let res of resolutions" [value]="res.value" class="right"> {{res.value}} </mat-option> </mat-select>