Встроенное редактирование текста с помощью Mat-таблицы:

Question

Есть ли у кого-нибудь хорошее решение для добавления встроенного редактирования текста в столбец, где вы можете редактировать, сохранять и повторно редактировать с помощью таблицы mat, как в этом примере: https://material.io/design/components/data-tables.html#behavior похоже, это все еще открытый вопрос на gitHub: https://github.com/angular/material2/issues/5982

Answer 1

У упомянутой вами проблемы с git hub есть несколько реализаций, которые придумали люди.

Вы можете получить вдохновение от этого:

https://stackblitz.com/edit/material2-beta12-es19ub?file=app%2Fapp.component.html

или это: https://stackblitz.com/edit/angular-g5u7cy?file=app%2Ftable-editing-example.html

Я бы рассмотрел вопрос о github, чтобы увидеть различные варианты, которые придумали люди.

Answer 2

внутри вашего matColumnDef у вас должны быть <th></th> и <td></td>, просто добавьте ввод к <td></td> с реактивными формами.

---

, если вы хотите, чтобы он был практически таким же, какВ этом примере вы можете создать абсолютный элемент position внутри позиционно-относительного элемента внутри элемента, который будет выдавать щелчки, получать и вводить и закрывать после некоторой логики, чтобы обновить 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>