Angular 2: Debones (ngModelChange)?


Czy istnieje sposób na odwrócenie dyrektywy szablonu
(ngModelChange)
?
Albo odwrotnie, jaki jest najmniej bolesny sposób na zrobienie tego inaczej?
Najbliższa odpowiedź, jaką widzę, to:

Jak śledzić zmiany formularzy w Angular 2?
https://coderoad.ru/34615425/
Na przykład mam pole tekstowe, chcę otrzymywać aktualizacje onChange, ale chcę je anulować za każdym naciśnięciem klawisza:
<input type="text" class="form-control" placeholder="Enter a value" name="foo" [(ngModel)]="input.event.value" (ngModelChange)="onFieldChange($event, input)">

Usuń kontakty
onFieldChange ()
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto mniej bolesny sposób anulowania naciśnięć klawiszy, jeśli nie chcesz używać podejścia
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);
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Odpowiedź Sangrama Nandkhile'a nie zadziała dla RxJs 6+. Oto, co musisz zmienić:
Import powinien wyglądać mniej więcej tak:
import {Subject} from "rxjs";
import {debounceTime, distinctUntilChanged} from "rxjs/internal/operators";

Musisz zadzwonić do
pipe
:
// ...
this.txtQueryChanged
.pipe(debounceTime(1000), distinctUntilChanged())
.subscribe(model => {
this.txtQuery = model;
// api call
});
// ...

Spojrzeć na

Ten artykuł
https://www.academind.com/lear ... nged/
do dalszego czytania.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Napisałem małą dyrektywę, aby rozwiązać ten problem.
Jak tego użyć:
<input [ngModel]="someValue" (ngModelChangeDebounced)="someValue = $event">

Możesz dodatkowo ustawić czas odbicia (domyślnie 500):
[ngModelChangeDebounceTime]="200"

Sama dyrektywa:
@Directive({
selector: '[ngModelChangeDebounced]',
})
export class NgModelChangeDebouncedDirective implements OnDestroy {
@Output()
ngModelChangeDebounced = new EventEmitter<any>();
@Input()
ngModelChangeDebounceTime = 500;// optional, 500 default subscription: Subscription;
ngOnDestroy() {
this.subscription.unsubscribe();
} constructor(private ngModel: NgModel) {
this.subscription = this.ngModel.control.valueChanges.pipe( skip(1),// skip initial value
distinctUntilChanged(),
debounceTime(this.ngModelChangeDebounceTime)
).subscribe((value) => this.ngModelChangeDebounced.emit(value));
}
}

Stackblitz:

https://stackblitz.com/edit/an ... 2q2ss
https://stackblitz.com/edit/an ... 2q2ss
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli chcesz dodać
debounceTime
podczas wykonywania połączenia http, możesz użyć funkcji
Subject
, która jest bardzo łatwa w użyciu. Co jest również wyjaśnione w

Poradnik angular2 - HTTP
https://angular.io/docs/ts/lat ... -name
.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się