So lösen Sie das Ereignis bei der Modellaktualisierung aus

Question

Ich möchte ein Ereignis auslösen, wenn ich einen Wert im Modell aus der Sicht aktualisiere.

Ich versuche, beobachtbare als brach zu verwenden.

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

    } 

} 

Ich habe Filterobjekt, das ich Beobachter wollen, ob ein Update in Filter habe ich Update-Funktion auf, die ui entsprechend behandeln

<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

Sie konnten die ngModelChange Ereignis für diesen Einsatz:

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

Eine weitere Option wäre die Verwendung der ngDoCheck Hook-Methode und der KeyValueDiffers Klasse. Hier ist ein Beispiel:

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') {  
     (...) 
     } 

     (...) 
    }); 
    } 
} 

Siehe diesen Link für weitere Informationen:

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