Angular2 ngModelの形式です。基になるモデルの更新を防止する

Question

これらのプロパティは、そのように定義されたコンポーネント内にあります。

<div *ngFor="let userDataDefinition of userDataDefinitions"> 
      <a href="#" (click)="setCurrentDefinition(userDataDefinition)"> 
       {{ userDataDefinition.key }} 
      </a> 
     </div> 

フォーム入力フィールドのようなngModelを使用：

[(ngModel)]="currentDefinition.property" 

をIは、次いでよう設定されているcurrentDefinition、に応じてデータを表示するフォームを有する

userDataDefinitions:Array<userDataDefinition>; 
currentDefinition:userDataDefinition = null; 

これは、入力フィールドの1つを編集するとすぐに、基礎となるcurrentDefinitionとuserDataDefinitionsが、瞬時に更新されることを意味します。 私の質問は、基本的なモデルをアクション（form submitなど）の際にのみ更新したい場合はどうすればいいですか？ currentDefinitionをクローンする必要がありますか？ ngModelを使用しないでください。

この結果を得るための正しい角度2の方法は何ですか？

は、私は、これはあなたが探しているものだと思います

Answer 1

非常

よろしくをありがとう：

{{heroName}}<br> 
<input [(ngModel)]="heroName" #change> <br> <br> 
<button (click)="update(change.value)">Update Model</button> 

「＃」を使用すると、変更されobjektへの参照を持っていますボタンをクリックすると、情報をパラメータとして送信します。

あなたは一方通行がビューにプロパティからのバインディングを行うとだけお好みのイベントのプロパティを更新することができ、より詳細

Angular2 - Update model on button click

Answer 2

のためにこの質問を見てください。ここにサンプルがあります：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 {}