change 이벤트는 입력의 포커스가 변경된 후에 만 호출됩니다. 키를 누를 때마다 이벤트가 발생하도록하려면 어떻게해야합니까?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
두 번째 바인딩은 모든 키 누르기 btw마다 변경됩니다.
답변
방금 이벤트 입력을 사용했으며 다음과 같이 정상적으로 작동했습니다.
.html 파일에서 :
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
.ts 파일에서 :
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
답변
사용 ngModelChange
위쪽 파괴함으로써 [(x)]
그 두 가지, 즉, 속성 데이터 바인딩 및 이벤트 바인딩에 구문 :
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
백 스페이스 키에서도 작동합니다.
답변
(키업) 이벤트가 가장 좋습니다.
이유를 보자 :
- 입력이 초점을 잃을 때만 트리거가 언급되었으므로 (변경) 사용이 제한됩니다.
- (키 누르기) 는 키를 누를 때 트리거되지만 백 스페이스와 같은 특정 키를 누를 때는 트리거하지 않습니다.
- ( 키 다운)은 키를 누를 때마다 트리거됩니다. 따라서 항상 1 문자만큼 지연됩니다. 키 입력이 등록되기 전에 요소 상태를 가져옵니다.
- (키업) 은 키 푸시 이벤트가 완료 될 때마다 트리거되므로 가장 좋은 방법이므로 가장 최근의 캐릭터도 포함됩니다.
따라서 (키업)은 가장 안전합니다.
- (변경) 이벤트와 달리 모든 키 입력에 이벤트를 등록합니다
- (키 누름) 무시하는 키 포함
- (keydown) 이벤트와 달리 지연이 없습니다.
답변
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
답변
이러한 경우를 처리하는 다른 방법은 formControl 을 사용 하고 valueChanges
구성 요소가 초기화 될 때 구독 하는 것입니다 .http 요청 수행과 같은 고급 요구 사항에 rxjs 연산자 를 사용 하고 문장 작성이 끝날 때까지 디 바운스를 적용하고 마지막 값을 취할 수 있습니다 이전을 생략하고 …
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);
});
}
}
답변
각도 ngModel을 동 기적으로 유지하는 비밀 이벤트는 이벤트 호출 입력 입니다. 따라서 귀하의 질문에 가장 적합한 답변은 다음과 같습니다.
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
답변
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />
아카이브 .ts
myMethod(value:string){
...
...
}