비동기 전향 검색을 구현하는 적절한 방법은 무엇입니까?

Question

내 Angular 앱에는 'Listings'페이지가 있습니다. 목록이 수백 개이므로 결과는 한 번에 20 개만로드되며 사용자가 아래로 스크롤하여 을 클릭하면로드됩니다.

일치하는 목록 만 반환하도록 서버에보다 구체적인 검색어를 보낼 수있는 목록 위에 검색 상자를 넣고 싶습니다.

예

, 사용자는 검색 창에 "myterm"을 입력 할 때, 각도에 GEThttps://myapp.com/listings/?search=myterm를 보낼 및 " 목록 '페이지에서 결과만을 표시한다.

각도 2+에서이 작업을 수행하는 적절한 방법이 무엇인지 잘 모르겠습니다. AngularJS에서 나는 매번 약속을 되 돌리는 새로운 요청을 해고했을 것입니다. 검색이 눌 렸습니다.하지만 Angular2 +에는 다른 접근법이 있습니다. 나는 그것에 관한 어떤 문헌도 찾을 수없는 것 같다.

지금까지 난 그냥 정말있을 것이기 때문에 내가 ReactiveFormsModule을 사용하는 것이 좋습니다

ngOnInit() { 
    this.listings = this.listingService.getListings(''); 
} 

Answer 1

을 (일명, 모든 것을 얻을) 하늘의 검색 매개 변수를 사용하여 서비스를 호출 구성 요소의 초기 함수 호출을 가지고 이 문제를 쉽게 해결할 수 있습니다.

먼저 FormGroup을 정의하고 하나의 양식 컨트롤로 구성 해 보겠습니다. 이제 우리는 우리의 폼 컨트롤의 값이 변경 그래서 기본적으로 때마다 우리는 사용자 유형과 같은 요청을 보내는에 관심이 무엇을 우리의 간단한 양식을 정의했다고

form: FormGroup; 

constructor(formBuilder: FormBuilder){ 
    this.form = formBuilder.group({ 
     search: '' 
    }); 
} 

. 우리는이 같은 관찰 가능한 valueChanges에 가입 할 수 있습니다 :

ngOnInit(){ 
    this.form.get('search').valueChanges 
     .subscribe(value => this.listingService.getListings(value))); 
} 

이 명확하게 작동하지만이 가진 문제는 우리가 모든 단일 문자 사용자 유형에 대한 요청을 보내려고하지 않는다는 것입니다. 그가 끝날 때까지 기다리고 싶다. 우리는 debounceTime 연산자를 사용하여이 문제를 해결할 수 있습니다 : 우리는 또한 (getListings는 관측을 반환 이후) 구독 체인을 만드는 것을 피하기 위해 switchMap 연산자를 사용

this.form.get('search').valueChanges 
     .debounceTime(1000) 
     .subscribe(value => this.listingService.getListings(value))); 

. 마지막으로 사용자가 입력 한 모든 내용을 삭제한다고 가정 할 때 빈 문자열로 요청을 보내지 않으므로 필터를 추가해야합니다. 그리고 우리는의 filter 연산자를 가지고 :

this.form.get('search').valueChanges 
     .filter(value => value) 
     .debounceTime(1000) 
     .switchMap(value => this.listingService.getListings(value)) 
     .subscribe(listings => this.listings = listings); 

템플릿이 비슷해야합니다 응답에 대한

<form [formGroup]="form"> 
    <input type="text" formControlName="search"> 
</form>