我在这样定义的组件中有这些属性。
userDataDefinitions:Array<userDataDefinition>;
currentDefinition:userDataDefinition = null;
然后我有一个表单,它根据currentDefinition显示数据,设置如下:
<div *ngFor="let userDataDefinition of userDataDefinitions">
<a href="#" (click)="setCurrentDefinition(userDataDefinition)">
{{ userDataDefinition.key }}
</a>
</div>
表单输入字段使用ngModel:
[(ngModel)]="currentDefinition.property"
这意味着只要编辑其中一个输入字段,就会立即更新基础currentDefinition和userDataDefinitions,如预期的那样。 我的问题是,如果我希望仅在动作(例如表单提交)时更新基础模型,我该怎么办? 我应该克隆currentDefinition吗?我不应该使用ngModel吗?
达到此结果的正确angular2方法是什么?
非常感谢
此致
答案 0 :(得分:1)
您可以从属性到视图执行单向绑定,并仅在您选择的事件上更新属性。以下是一个示例:http://plnkr.co/edit/lNcp7vcEGkozTzB8w4OT?p=info
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
@Component({
selector: 'my-app',
template: `
<div>
<label>{{name}}</label>
<input type="text" [ngModel]="name" />
<button (click)="name = 'change'">Change</button>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = 'Angular2'
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
答案 1 :(得分:-1)
我认为这是你正在寻找的东西:
{{heroName}}<br>
<input [(ngModel)]="heroName" #change> <br> <br>
<button (click)="update(change.value)">Update Model</button>
使用&#34;#&#34;你有一个对正在改变的objekt的引用,如果你然后点击你发送信息作为参数的按钮。
查看此问题以获取更多详细信息