다음 결과를 하나로 병합하고 Angular 2 프로젝트에 표시합니다.

RxJ의 Observables에 대해 머리를 쓰려고합니다. 검색 상자가있는 페이지가 있고 사용자가 입력을 시작하면 Webservice은 20 개의 결과를 반환하고 을 누르면 다음 20 개의 결과가 표시됩니다.다음 결과를 하나로 병합하고 Angular 2 프로젝트에 표시합니다.

처음 20 개 결과를 성공적으로 얻을 수 있지만 다음 20 개는 이전 결과와 병합 할 수 없습니다.

서비스

@Injectable() 
export class AppService { 

constructor(private http : Http) {} 

search(terms : Observable <string>) { 

    return terms 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .switchMap(term => this.searchEntries(term)); 

    } 

searchEntries(term) { 

    const API = "https://jsonplaceholder.typicode.com/posts/"; 

    return this 
     .http 
     .get(API) 
     .map(res => res.json()); 
    } 

}

구성 요소

export class AppComponent { 

resp : Object; 
searchTerm = new Subject <string>(); 

constructor(private _searchService : AppService) { 
this 
    ._searchService 
    .search(this.searchTerm) 
    .subscribe(results => { 
    this.resp = results; 
    }); 
} 
}

HTML

<span *ngFor="let res of resp | slice:0:10"> 
     <a href="#" class="lex-column align-items-start"> 
     <div class="d-flex w-100 justify-content-between"> 
      <h5 class="mb-1">{{res.title}}</h5> 
      <small># {{res.id}}</small> 
     </div> 
     <p class="mb-1">{{res.body}}</p> 
     <small >Donec id elit non mi porta.</small> 
     </a> 
</span>

내가 하 API URL을 일반 URL로 바 꾸었습니다.

다음 20 개 결과를 이전에 표시된 결과와 통합하는 데 도움이됩니다.

출처

2017-04-02 Gags

'resp'가 배열입니까? 어떻게 표시합니까? http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically를 확인 했습니까? – echonax

그것은 거기에있다. .. 인터넷은 분 동안이었다. .. – Gags

대신에 그것을 배열에 밀어 넣는 것에 대해 가치를 할당하는 것? 다음과 같이 :'this.resp.push (results);'당연히'resp = [];' – echonax

만 10 항목 촬영이 매번함으로써 take(n) 운영자

return terms 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .take(10) 
     .switchMap(term => this.searchEntries(term));

를 사용할 수 있습니다.

출처

2017-04-02 18:17:04 Aravind

이걸 취하면 (10) 달성에 도움이 될 것입니다. 10 가지 결과를 병합하는 데 도움이 될까요? – Gags

이것은 전혀 작동하지 않는 것 같습니다. – Gags

도움이 될 것 같아요. 하지만 구독하면 배열을 푸시 할 수 있습니다. 이걸 시도했을 때 뭘 얻었 니? 및 오류? – Aravind

다음 결과를 하나로 병합하고 Angular 2 프로젝트에 표시합니다.

답변

관련 문제