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