Schimbarea de eveniment este numit doar după accentul de la intrare s-a schimbat. Cum pot face ca evenimentul a incendiilor pe fiecare apăsare de tastă?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
Cea de-a doua legare modificări pe fiecare apăsare de tastă btw.
Eu am folosit eveniment de intrare și a mers foarte bine după cum urmează:
în .fișier html :
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
în .ts fișier :
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
Folosesc ngModelChangeprin spargerea
[(x)]` de sintaxă în două bucăți, și anume, proprietatea databinding și evenimente cu caracter obligatoriu:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
Acesta funcționează pentru tasta backspace prea.
Un alt mod de a rezolva astfel de cazuri este de a utiliza formControl și vă abonați la acest's valueChanges
atunci când componenta este inițializat, care vă va permite să utilizați rxjs operatori pentru cerințe avansate cum ar fi efectuarea de cereri http, se aplică un debounce până când utilizatorul a terminat de scris o teză, să ia ultima valoare și omite anterior, ...
import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'some-selector',
template: `
<input type="text" [formControl]="searchControl" placeholder="search">
`
})
export class SomeComponent implements OnInit {
private searchControl: FormControl;
private debounce: number = 400;
ngOnInit() {
this.searchControl = new FormControl('');
this.searchControl.valueChanges
.pipe(debounceTime(this.debounce), distinctUntilChanged())
.subscribe(query => {
console.log(query);
});
}
}
Secretul eveniment care ține unghiulare ngModel sincron este evenimentul apel introducere. Prin urmare, cel mai bun răspuns la întrebarea ta ar trebui să fie:
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />
arhiva .ts
myMethod(value:string){
...
...
}
În cazul meu, solutia este:
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"