在 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了解更多信息

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

Entered text value is replicating in dynamic generated textbox through ngFor loop in angular 2

html

angular

ngfor

angular-ngmodel