Góc 2: Gỡ lỗi (ngModelChange)?

Question

Có cách nào để đưa ra chỉ thị mẫu (ngModelChange) không?

Hoặc, cách khác, cách đau đớn nhất để làm điều đó theo một cách khác là gì?

Câu trả lời gần nhất tôi thấy là thế này: How to watch for form changes in Angular 2?

Vì vậy, ví dụ, tôi có một đầu vào văn bản, tôi muốn nhận được onChange cập nhật, nhưng tôi muốn debounce nó xuống từ mỗi tổ hợp phím:

<input type="text" class="form-control" placeholder="Enter a value" name="foo" [(ngModel)]="input.event.value" (ngModelChange)="onFieldChange($event, input)"> 

debounce onFieldChange()

Answer 1

Nếu bạn muốn thêm debounceTime trong khi làm http gọi cho bạn có thể sử dụng Subject mà là rất dễ sử dụng. Điều này cũng được giải thích trong angular2 tutorial - HTTP.

Answer 2

Đây là cách ít gây đau đớn khi nhấn phím tổ hợp nếu bạn không muốn sử dụng phương pháp formcontrol.

search.component.html

<input type="text" placeholder="Enter a value" name="foo" [(ngModel)]="txtQuery" (ngModelChange)="onFieldChange($event)"> 

search.component.ts

export class SearchComponent { 

     txtQuery: string; // bind this to input with ngModel 
     txtQueryChanged: Subject<string> = new Subject<string>(); 

     constructor() { 
      this.txtQueryChanged 
      .debounceTime(1000) // wait 1 sec after the last event before emitting last event 
      .distinctUntilChanged() // only emit if value is different from previous value 
      .subscribe(model => { 
       this.txtQuery = model; 

       // Call your function which calls API or do anything you would like do after a lag of 1 sec 
       this.getDataFromAPI(this.txtQuery); 
      }); 
     } 

    onFieldChange(query:string){ 
     this.txtQueryChanged.next(query); 
    } 
}