モデル更新時にイベントをトリガーする方法

Question

モデルの値をビューから更新するときにイベントをトリガーしたい

私は休暇として観察できるようにしようとしています。

export class requestsComponent implements OnInit { 

    private filter: Observable<{ 
     name: string; 
     phone: number; 
     email: string; 
     agent: string; 
    }>; 
    constructor(@Inject(BookSiteVisitService) private bookSiteVisitService: BookSiteVisitService) { 

     this.filter = new Observable(observer => { 
     }); 
     this.filter.subscribe(
      value => { 
       console.log(value); 
      }, 
      error => { console.log(error) }, 
      () => { 
       console.log('conmplete'); 
      } 
     ); 
    } 
    ngOnInit() { 

    } 

} 

私はあなたがこのためにngModelChangeイベントを使用することができますそれに応じて

<tbody> 
    <tr> 
     <td><input type="text" [(ngModel)]="filter.name" class="form-control"></td> 
     <td><input type="text" [(ngModel)]="filter.phone" class="form-control"></td> 
     <td><input type="text" [(ngModel)]="filter.email" class="form-control"></td> 
     <td></td> 
     <td><input type="text" [(ngModel)]="filter.agent" class="form-control"></td> 
    </tr> 
    <tr *ngFor="let request of requests"> 
     <td>{{request.customerName}}</td> 
     <td>{{request.phone}}</td> 
     <td>{{request.email}}</td> 
     <td>{{request.comment}}</td> 
     <td>{{request.representativeName}}</td> 
     <td>{{request.requestType}}</td> 
    </tr>  
</tbody> 

Answer 1

をUIを扱う更新機能まで持っているフィルタのいずれかのアップデートがあれば、私は私が観察者にしたいフィルタオブジェクトを持っている：

は

<td> 
    <input type="text" 
    [(ngModel)]="filter.name" 
    (ngModelChange)="onChange()" <-------- 
    class="form-control"> 
</td> 

もう1つのオプションは、ngDoCheckフックメソッドとKeyValueDiffersクラスを利用することです。ここではサンプルです：

constructor(differs: KeyValueDiffers) { 
    this.differ = differs.find([]).create(null); 
} 

ngDoCheck() { 
    var changes = this.differ.diff(this.filter); 
    if (changes) { 
    changes.forEachChangedItem((elt) => { 
     if (elt.key === 'name') { 
     (...) 
     } 

     if (elt.key === 'phone') {  
     (...) 
     } 

     (...) 
    }); 
    } 
} 

は、より多くの詳細については、このリンクを参照してください：私は、観察者の利用する方法

• https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html