angular - Mat-table を使用したインライン テキスト編集:

Question

この例のように、マットテーブルで編集、保存、再編集できる列にインラインテキスト編集を追加するための良い解決策はありますか: https://material.io/design/components/data-tables.html# gitHub ではまだ未解決の問題のようです: https://github.com/angular/material2/issues/5982

Answer 1

matColumnDef 内に a<th></th>と aが必要です。リアクティブ フォーム<td></td>に入力を追加するだけです。<td></td>

---

マテリアルの例と実質的に同じにしたい場合は、クリック、受信、入力、およびいくつかのロジックの後に閉じて、formControl を更新するときにプロンプ​​トを表示する位置相対要素内に位置絶対要素を作成できます。

それでも、formControls が必要であり、matColumnDef を編集する必要があります。

githubリクエストのリンクから取られた例

      <ng-container matColumnDef="time">
        <th mat-header-cell *matHeaderCellDef> time </th>
        <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
            <input type="text" formControlName="time" placeholder="Time"> 
        </td>
      </ng-container>