web-dev-qa-db-ja.com

Angular Materialデータテーブルでのインライン編集

以下の例を考えてください。インライン編集機能を使用してangular材料データテーブルを作成することはできますか?または、特定の列の下にあるセルを読み込み時に編集可能にする(電子メールの列フィールドが編集可能な下の画像を参照)。もしそうなら、サンプルコードを共有できますか?

動的行を含む角度材料データテーブル

enter image description here

20
Sundar

これは、実際にはAngular Materialの未解決の問題です。素材: 表:入力にインライン編集を追加 。残念ながら、現時点では実装されていませんが、その問題に対するコメントで解決策のアイデアを見つけることができます。

マテリアルデザインガイドの [データテーブル]> [動作] の下にある「インラインテキスト編集」セクションは、これがどのように見えるかを示しています。

3
Cito

まあ、これはきれいなインライン編集ではありませんが、-私は同じことを探しています-これは私の目的には十分です:

https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Fapp.component.html

[アイデアは、セルをクリックしたときに小さなポップアップを表示することです]

私の代替アイデアは、(より多くの作業がありますが)すべてのセルを入力フィールドに置き換え、それらを正しい値にバインドすることです-ユーザーにとって-正確な望ましいユースケース

3
Hobbamok