1

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

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"

これは、入力フィールドの 1 つを編集するとすぐに、基になる currentDefinition と userDataDefinitions が期待どおりに即座に更新されることを意味します。私の質問は、基になるモデルをアクション (フォームの送信など) でのみ更新したい場合はどうすればよいですか? currentDefinition を複製する必要がありますか? ngModel を使用すべきではありませんか?

この結果を達成するための正しい angular2 の方法は何ですか?

どうもありがとうございました

よろしく

4

2 に答える 2

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 {}
于 2016-11-04T06:45:07.123 に答える
-1

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

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

「#」を使用すると、変更中のオブジェクトへの参照があり、ボタンをクリックすると、情報がパラメーターとして送信されます。

詳細については、この質問をご覧ください

Angular2 - ボタンのクリックでモデルを更新

于 2016-11-04T06:43:05.280 に答える