如何在模型更新時觸發事件

Question

我想在觸發事件時更新模型中的任何值。

我想利用observable作爲休耕。

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() { 

    } 

} 

我有我想觀測器濾波器對象如果在過濾器我有多達它處理UI相應

<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

您可以使用ngModelChange事件此更新功能的更新：

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

另一種選擇是利用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