Question

我必须创建一个表，其中两个相同的列相邻，并且应该基于其他字段值以水平模式填充数据。

说，有一个数字字段和一个添加按钮。单击添加时，第一个数据应在表的左列中输入，再次添加数字时，应在右列中显示，然后再向左显示，并应重复此操作。

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

这样的事情。

我刚开始学习棱角分明，因此无法继续进行。我尝试了一些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打开。但是我不清楚如何在我的情况下使用它。需要帮助。

Answer 1

我认为您需要编辑HTML模板中的逻辑，我试图模拟 fieldArray

的数据

检查我在stackBlitz上创建的example

如何在相邻列相同的表中创建数据并向其中添加数据？

1 个答案: