web-dev-qa-db-ja.com

Angular 5コンポーネントでのモデル変更の処理（2方向バインディング））

現在angular 5アプリケーションです。ビューの入力でコンポーネントのメンバー変数を変更し、変更後にコンポーネントで変数を使用しようとしています。

私の構造は次のとおりです：

フォルダ：my-test

  • my-test.component.html
  • my-test.component.css
  • my-test.component.ts

1）my-test.component.html：

<input [(ngModel)]="hello" />

2）my-test.component.ts：

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}

残念ながら、このソリューションは機能しません。 uiでコンポーネントの変数を変更し、後でコンポーネントで使用する方法を知っていますか？

ありがとうございました！！

javascripthtmlangularangular-componentstwo-way-binding
8
TimHorton

（ngModelChange）ディレクティブを使用できます

    <input [(ngModel)]="hello" (ngModelChange)="myFunction()"/>

コード：

    import { Component } from '@angular/core';

    @Component({
        selector: 'my-test',
        templateUrl: './my-test.component.html',
        styleUrls: ['./my-test.component.css']
    })
    export class MyTestComponent {
        hello: string = "bonjour";

        constructor() { }

        myFunction() {
            console.log(this.hello);
        }
    }
7
Matt

ボックス構文[（ngModel）]でバナナを使用して、変数（hello）の双方向データバインディングを取得します。コンポーネント内の他のメソッドでhello変数を使用する場合は、値を監視する必要はありません。 ngModelはproperty（hello）とview（input）の同期を保つため、手動で変更します。したがって、「hello」プロパティを使用するメソッドは常に更新された値を取得します。

ただし、値が変更されるたびに何かを実行する場合は、ngModelChangeプロパティを使用して、プロパティの値の変更をリッスンします。

<input type="text" [(ngModel)]="hello">
{{hello}}

プロパティの値の変化を聞く

<input type="text" [(ngModel)]="hello" (ngModelChange)="executeCallback($event)">
{{hello}} //will also get updated

<input type="text" [ngModel]="hello" (ngModelChange)="executeCallback($event)">
{{hello}} //will not get updated
1
Nikx Fabrizio

_(ngModelChange)=functionToCall($event)_を使用して、モデルの変更時に関数を呼び出し、更新された値を取得できます。これはかなり便利で、同じ要素の通常の[(ngModel)]で使用できます。この場合、通常の[(ngModel)]の代わりに_[ngModel]_だけを使用して、functionToCall関数から変数に新しい値を設定できますが、これは必要に応じて異なります。ここに小さなデモがあります（更新された値を確認するにはコンソールを確認してください）：

https://stackblitz.com/edit/angular4-rnvmhm?file=app%2Fapp.component.html

1
Commercial Suicide