Question

我需要根据下图中显示的用户点击设计多个文本框

但每当我点击文本框中的+按钮值时，重复我的html代码如下

<div class="form-group" style="margin-top: -10px;">
    <div class="col-lg-10" *ngFor="let rowplus of rowplus" style="margin-top: 12px;">
        <input type="text"  placeholder="Command" class="form-control" [(ngModel)]="cli.cmd[rowplus[0]]"  name="cmd" />
    </div>
    <div class="col-lg-2" style="margin-top: 12px;">
        <button class="btn btn-success" (click)="addrow()"><i class="fa fa-plus"></i></button>
        <button class="btn btn-danger" (click)="subrow()"><i class="fa fa-minus"></i></button>
    </div>
</div>

如何避免这种情况以及如何为[（ngmodel）]使用动态值。

Answer 1

不要对所有文本框使用相同的变量

[(ngModel)]="cli.cmd"

您可以使用index

<div class="col-lg-10" *ngFor="let rowplus of rowplus; let idx=index" style="margin-top: 12px;">
  <input  type="text" id="command" placeholder="Command" class="form-control"  [(ngModel)]="cli[idx].cmd" name="cmd" />
</div>

或将值存储在*ngFor转换器变量rowplus

中

<div class="col-lg-10" *ngFor="let rowplus of rowplus" style="margin-top: 12px;">
  <input  type="text" id="command" placeholder="Command" class="form-control"  [(ngModel)]="rowplus.cmd" name="cmd" />
</div>

如何获取在Angular2中动态创建的文本框的值

1 个答案: