Как создать и добавить данные в таблицу, где соседние столбцы совпадают?

Question

Мне нужно создать таблицу, в которой два одинаковых столбца смежны, а данные должны быть заполнены по горизонтали на основе значения другого поля.

Скажем, есть числовое поле и кнопка Добавить. При нажатии кнопки «Добавить», первые данные должны войти в левый столбец таблицы, а при добавлении номера снова отобразиться в правом столбце, а затем снова влево, и это должно повториться.

NumberCol| NumberCol|
    1    |    2     |
    3    |    4     | ...

Как то так.

Я новичок в angular и не могу получить хорошую идею, чтобы продолжить. Я пробовал что-то с помощью цикла for и if, но это не сработало

Поле для ввода номера

 <mat-form-field>
    <input matInput placeholder="Claim Number" #claimNum>
  </mat-form-field>
  <button (click)="onAddClaimNumber(claimNum.value)">Add</button>

Настольный дисплей

     <table>
           <thead>
           <tr >
             <th>Claim Number </th>
             <th>Claim Number</th>
           </tr>
           </thead>
           <tbody>
             <div *ngFor="let field of fieldArray; let i = index">
              <tr *ngIf = "i % 2 == 0"  >
                <td>{{field}}
                  <input matInput [(ngModel)]="field.claimNumber" class="form-control" type="text" name="{{field.claimNumber}}" />
                </td>

              </tr>
              </div>
              <div class="secCol" *ngFor="let field of fieldArray; let i = index">
                  <tr *ngIf = "i % 2 != 0"  >
                    <td>{{field}}
                      <input matInput [(ngModel)]="field.claimNumber" class="form-control" type="text" name="{{field.claimNumber}}" />
                    </td>

                  </tr>
                  </div>
           </tbody>
         </table>

Из файла TS

 private fieldArray: Array<any> = [];
  private newAttribute: any = {};

 public onAddClaimNumber(input : string){
    this.claimNumber = input ;
    this.fieldArray.push(this.claimNumber);
    console.log(this.fieldArray[0])

  }

Я наткнулся на ng-repeat и ng-switch on. Но мне не ясно, как использовать это в моем случае. Нужна помощь.

Answer 1

Я думаю, вам нужно отредактировать логику внутри вашего HTML-шаблона, я попытался смоделировать данные fieldArray

Проверьте это пример я создал на stackBlitz