为什么用户无法编辑此引导表？答案

【问题标题】：Why is this bootstrap table uneditable by the user?为什么用户无法编辑此引导表？
【发布时间】：2019-10-03 14:10:03
【问题描述】：

我刚刚实现了这个引导表：

这是它的 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/ 我怎样才能使它们可编辑？我必须使用表格吗？
谢谢！

【问题讨论】：

标签： angular html css bootstrap-4

【解决方案1】：

默认情况下，除了 input 标签之外，您无法编辑 html 中的元素。

但您可以使用属性 contenteditable。这将使元素可编辑。

所以你可以这样使用，

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

这将使整行都可以编辑。

【讨论】：