각형 폼 컨트롤 마지막 관찰 가능 변경

Question

제안에 대한 백엔드를 쿼리하는 자동 완성 함수를 구축하고 있으며 사용자가 각형 폼 컨트롤에 입력하는 동안 특정 지연을 적용한 마지막 쿼리 만 가져 오려고합니다. 이것은이 3000 밀리 초 후에 편지에 입력 각각에 대한 쿼리를 만드는 그러나 작동

this.newVendorForm.get('address').valueChanges.pipe(delay(3000)).subscribe(
    address => { 
    this.geocodeApi.getAddressSuggestions(address) 
     .subscribe(
     response => { 
      console.log('address suggestions'); 
      console.log(response); 
      this.addressSuggestions = response; 
     }, 
     error => { 
      console.log('error getting address suggestion'); 
      console.log(error); 
     } 
    ) 
    } 
); 

처럼 현재 내 코드 보인다. 예를 들어 'test'는 3000 밀리 초 후에 [ 't', 'te', 'tes', 'test']를 쿼리합니다. 3000ms 지연 후 valueChanges에서 마지막 변경 (예 : '테스트')을 수행 한 다음 구독하려면 어떻게해야합니까? 도움 주셔서 감사합니다.

Answer 1

debounceTime과 switchMap의 혼합이 필요합니다. 서로 3 초 내에 두 valueChanges 배출이있는 경우, 마지막 하나가 사용되도록

this.newVendorForm.get('address').valueChanges.pipe(
    debounceTime(3000), 
    switchMap(address => this.geocodeApi.getAddressSuggestions(address).pipe(
    catchError(err => { 
     console.error(err); 
     return of(); 
    }) 
)), 
    filter(Boolean), 
).subscribe(response => this.addressSuggestions = response); 

• debounceTime가한다. 이것은 delay과 다르며 변경 후 3 초가 지나면 변경 사항이 모두 적용됩니다.
• switchMap은 http 요청과 같은 내부 관찰 가능 항목을 가져 와서 관찰 가능한 스트림을 변경합니다. 즉, 이제는 관찰 가능한 스트림 인 getAddressSuggestions에 가입했습니다. 무언가가 switchMap으로 나오면 이전 관찰 가능을 취소합니다. 그 결과 이전에 만들어진 getAddressSuggestions 전화가 새 전화가 시작되기 전에 완료되지 않았 으면 이전 전화가 취소됩니다.
• catchError (lettable 연산자 버전 .catch)은 valueChanges 대신에 관찰 가능한 getAddressSuggestions에서 사용됩니다. 그렇지 않은 경우 API에서 오류가 발생하면 valueChanges observable이 완료됩니다. catchError을 사용하면 valueChanges observable을 완료하지 않고 오류를 처리 할 수 ​​있습니다.
• filter은 값이있는 응답 만 내보내는 데 사용됩니다. 오류가있는 경우 of()은 방출되지 않습니다. 이 상황을 처리하는 한 가지 방법 일뿐입니다.

마지막으로 해야하므로 설명서 .subscribe을 피할 수 있습니다. 대신 템플릿의 | async 파이프를 사용하여 구독을 처리 할 수 ​​있습니다.