如何动态添加HTML元素/内容-Angular

Question

在基本HTML表格中动态添加HTML元素（例如另一列）的最佳方法是什么？

我想在表下方有一个按钮，如果用户单击该按钮，则该事件将在表中添加相同数量的行并添加另一列。 我想支持大约5个额外的列添加到表中。

这是我目前的HTML表格：

<table>
<thead>
    <tr>
        <th id="row-tag"></th>
        <th id="option-column">Option 1</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td id="row-tag">P</td>
        <td id="option-column">{{ p }}</td>
    </tr>
    <tr id="row-tag">
        <td>
            <app-a-p (saveButtonClick)="toggleAP($event)"
                                  [modModalValues]="modModalValues">
            </app-a-p>
        </td>
        <td id="option-column">
            <div class="input-group input-group-sm">
            $<input
                   *ngIf="toggleAP==true"
                    type="text"
                    name="aP"
                    size="10"
                    disabled
                    value=""
                    />
            <input
                   *ngIf="toggleAP==false"
                    type="text"
                    name="aP"
                    size="10"
                    [ngModel]="con.pA"
                    (ngModelChange)="con.pA = $event" appFormatP
                    (blur)="checkAP($event.target.value);
                            inputTracker.addModifiedValue('Option 1', $event.target.value)"
                    />

            </div>

        </td>
    </tr>
    <tr>
        <td id="row-tag">L</td>
        <td id="option-column">${{l}}</td>
    </tr>
    <tr>
        <td id="row-tag">R</td>
        <td id="option-column">${{r}}</td>
    </tr>
</tbody>
</table>

Answer 1

我认为在Angular中，您可以根据数据定义表。 例如，您有一个fields数组定义了列，而data数组定义了表中实际的内容。

 <table >
      <thead>
      <tr>
        <th  *ngFor='let key of this.fields'>{{key}}</th>
      </tr>
      </thead>
      <tbody>
      <tr  *ngFor='let row of this.data ' >
        <td scope="row"  *ngFor='let key of this.fields'> {{row[key]}} </td>
      </tr>
      </tbody>
    </table>

当您需要新列时，只需将新字段推入字段即可。 喜欢

   fields.push('newcolumn');

当您需要新行时，只需执行以下操作：

  data.push({col1: '', col2:'', newcolumn: ''});     

Answer 2

查看JavaScript中的insertRow（）和insertCell（）函数。 结合编写的onClick函数，您可以编辑表格。

Answer 3

在使用angular时在UI上生成表的一个好方法是使用2D数组（行*列），可以使用一个按钮，使用该按钮可以向该数组动态添加值，并向该表添加另一个行/列。