输入的文本值通过angular 2中的ngFor循环在动态生成的文本框中复制

Question

我创建了一个动态文本框，ngFor其中通过在另一个文本框中键入数字来生成文本框的数量。

HTML。

    <div class="input-group col-sm-3">
        <span class="input-group-addon">Num of columns: </span>
        <input class="form-control"
               (change)="addColumnLength($event.target.value)"
               [(ngModel)]="workModel.columnLength"
               placeholder="Enter num of columns">
    </div>
</div>
<div class="column-content col-sm-3">
    <div class="input-group col-sm-12" *ngFor="let column of workModel.columnData; let i= index ">
        <span class="input-group-addon">Column {{i + 1}} </span>
        <input class="form-control"
               [value]="workModel.columnData[i]"
               (change)="assignColumnData($event.target.value, i)">
    </div>
</div>

这是我的 .ts 文件。

 addColumnLength( length : number ) {
    this.workModel.columnData = [];
    for ( let i = 0; i < length; i++ ) {
        this.workModel.columnData[i] =  undefined;
    }
}

assignColumnData( length : number, index : number ) {
    this.workModel.columnData[ index ] = length;
}

在这里，我能够生成插入的文本框的数量。但是当我在任何文本框中输入值时，它会在动态生成的所有其他文本框中复制。

我也尝试使用ngModel如下

  <div class="input-group" *ngFor="let column of workModel.columnData; let i= index ">
    <span class="input-group-addon">Column {{i}} </span>
    <input class="form-control"
          name="index_{{i}}"
           [(ngModel)]="workModel.columnData[i]">
   </div>

这也是造成同​​样的原因。这里有什么遗漏吗。提前致谢。

更新：当我减少文本框中的长度时，整个数组都按照我给出的方式重置this.workModel.columnData = []。如何不删除输入的数据textbox？

Answer 1

这个问题可以通过使用 trackBy 来解决。

<div class="column-content col-sm-3">
    <div class="input-group col-sm-12" *ngFor="let column of workModel.columnData; let i= index; trackBy:trackByFn ">
        <span class="input-group-addon">Column {{i + 1}} </span>
        <input class="form-control"
               [value]="workModel.columnData[i]"
               (change)="assignColumnData($event.target.value, i)">
    </div>
</div>

...........

trackByFn(index: any) {
  return index;
}

您可以参考https://angular.io/api/common/NgForOf了解更多信息