gpt4 book ai didi

angular - 带有 ngFor 元素的 ngModel 的动态 angular2 形式

转载 作者:太空狗 更新时间:2023-10-29 17:06:16 25 4
gpt4 key购买 nike

我正在尝试创建一个连接到 ngModel 的动态表单,它允许用户根据需要添加更多控件。如下图所示:

image

除了在添加一组新控件时表单会像预期的那样运行,因为它会删除先前输入的内容。即使模型没有改变。我创建了这个 plunkr为了证明我正在谈论的行为。

这是我写的html模板:

<tr *ngFor="let work of works; let i = index">
<td>
<select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation">
<option>Operation 1</option>
<option >Operation 2</option>
</select>
</td>

<td>
<input required type="number" class="form-control" [(ngModel)]="work.cost"
name="cost">
</td>

<td>
<input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours"
name="hours">
</td>

<td>
<button type="button" class="btn btn-danger btn-circle" (click)="removeWork(i)">Remove</button>
</td>
</tr>

和 typescript 组件定义:

import {Component, ChangeDetectionStrategy} from '@angular/core'

@Component({
selector: 'my-app',
templateUrl: 'src/app.html'
})
export class App {
works = [];

addWork(){
this.works.push({});
}

removeWork(index){
this.works.splice(index, 1);
}

get diagnostic() {
return JSON.stringify(this.works);
}
}

我无法理解这种行为,我发现的所有相关问题都是关于旧版本的 angular,没有一个有类似的问题。

最佳答案

您的控件需要唯一的名称才能在 Angular2 中正常工作。所以请执行以下操作:

<td>
<input required type="number" class="form-control" [(ngModel)]="work.cost"
name="cost-{{i}}">
</td>

关于angular - 带有 ngFor 元素的 ngModel 的动态 angular2 形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38639560/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com