Почему эта таблица начальной загрузки недоступна для редактирования пользователем?

Question

Я только что реализовал эту таблицу начальной загрузки:

Вот ее html-определение:

<div class="card card">
      <div class="header">
        <div class="typo-line">
          <h4>Suivi des approbations</h4>
        </div>
        <!-- <h4 class="title">Table on Plain Background</h4> -->
        <!-- <p class="category">Here is a subtitle for this table</p> -->
      </div>
      <div class="content table-responsive table-full-width">
        <table class="table table-hover">
          <thead>
            <tr>
              <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of tableData2.dataRows">
              <td *ngFor="let cell of row">{{ cell }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

Вот соответствующий код для машинописного текста:
ngOnInit () {

   this.tableData2 = {
        headerRow: [ 'Version', 'Approbateur(nom+fonction)',  'Principales remarques', 'Date d\'approbation'],
        dataRows: [
            ['', '', '', ''],
            ['', '', '', ''],
            ['', '', '', ''],
            ['', '', '', ''],
            ['', '', '', ''],
            ['', '', '', ''],
            ['', '', '', ''],

        ]
    };

Строки недоступны для редактирования.Итак, вот мои вопросы:
1 / Почему строки нельзя редактировать со стороны пользователя?
2 / Как я могу сделать их редактируемыми?Нужно ли использовать формы?
Спасибо!

Answer 1

По умолчанию вы не можете редактировать элементы в html, кроме тега input .

Но вы можете использовать атрибут contenteditable .это сделает элемент доступным для редактирования.

, поэтому вы можете использовать его следующим образом:

    <tr contenteditable='true'>
     <th  *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>          
</tr>

это позволит редактировать всю строку.