Как динамически добавлять 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 - это использование 2D-массива (строка * столбец). Использование может иметь кнопку, с помощью которой вы можете динамически добавлять значения в этот массив и иметь другую строку / столбец в Таблица.

Answer 2

Я думаю, что в Angular вы определяете таблицу на основе ваших данных. например, у вас есть поля массива, определяющие столбцы, а массив данных определяет, что на самом деле находится в таблице.

 <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 3

Посмотрите на функции insertRow () и insertCell () в JavaScript. Эта функция наряду с написанной вами функцией onClick позволит вам редактировать таблицу.