관찰 가능한 RXJS 배열에 대한 단순 필터

관찰 가능한 RXJS 배열에 대한 단순 필터

Angular2로 프로젝트를 시작하는데 개발자들이 Promise 대신 RXJs Observable을 추천하는 것 같습니다.

서버에서 요소(픽) 목록을 검색할 수 있습니다.하지만 예를 들어 id를 사용하여 요소를 어떻게 필터링할 수 있습니까?

다음 코드는 제 앱에서 추출한 것으로 현재 최종 작동 솔루션을 보여줍니다.그것이 누군가에게 도움이 되기를 바랍니다.

@Injectable()
export class EpicService {

  private url = CONFIG.SERVER + '/app/';  // URL to web API

  constructor(private http:Http) {}

  private extractData(res:Response) {
    let body = res.json();
    return body;
  }

  getEpics():Observable<Epic[]> {
    return this.http.get(this.url + "getEpics")
      .map(this.extractData)
      .catch(this.handleError);
  }

  getEpic(id:string): Observable<Epic> {
    return this.getEpics()
      .map(epics => epics.filter(epic => epic.id === id)[0]);
  }
}

export class EpicComponent {

  errorMessage:string;
  epics:Epic[];
  epic:Epic;

  constructor(
    private requirementService:EpicService) {
  }

  getEpics() {
    this.requirementService.getEpics()
      .subscribe(
        epics => this.epics = epics,
        error => this.errorMessage = <any>error);
  }

  // actually this should be eventually in another component
  getEpic(id:string) {
    this.requirementService.getEpic(id)
        .subscribe(
        epic => this.epic = epic,
        error => this.errorMessage = <any>error);
  }
}

export class Epic {
  id: string;
  name: string;
}

당신의 도움에 미리 감사드립니다.

관찰 가능한 배열이 아닌 실제 배열을 필터링할 수 있습니다.따라서 관찰 가능한 내용을 매핑합니다(즉,Epic[]) 필터링된 상태로Epic.

getEpic(id: string): Observable<Epic> {
  return this.getEpics()
     .map(epics => epics.filter(epic => epic.id === id)[0]);
}

그 후에 당신은 할 수 있습니다.subscribe로.getEpic당신이 원하는 것은 무엇이든 할 수 있습니다.

다음을 사용하여 이 작업을 수행할 수 있습니다.flatMap그리고.filter의 방법.Observable의 JS 배열 필터 방법 대신map다음과 같은 것:

this.getEpics() 
    .flatMap((data) => data.epics) // [{id: 1}, {id: 4}, {id: 3}, ..., {id: N}]
    .filter((epic) => epic.id === id) // checks {id: 1}, then {id: 2}, etc
    .subscribe((result) => ...); // do something epic!!!

flatMap필터링을 위한 단일 인덱스를 제공하여 다음에 발생하는 결과에 대해 계속 진행할 수 있습니다.

TypeScript가 사용자의 사용에 관계없이 문자열과 숫자를 비교할 수 없음을 나타내는 오류를 발생시키는 경우==필터에 a를 추가합니다.+전에epic.id필터에서 Angular docs에 따라:

    .flatMap(...)
    .filter((epic) => +epic.id === id) // checks {id: 1}, then {id: 2}, etc
    .subscribe(...)

예:

https://stackblitz.com/edit/angular-9ehje5?file=src%2Fapp%2Fapp.component.ts

수정 사항이 있는 원래 답변:Observables게으르다, 게으르다, 게으르다, 게으르다, 게으르다, 게으르다,전화해야 합니다.subscribe에 대해 말하자면observable요청을 전송합니다.

  getEpic(id:number) {
    return this.getEpics()
           .filter(epic => epic.id === id)
           .subscribe(x=>...);
  }

Rxjs 6으로 업데이트:

import {filter} from 'rxjs/operators';

getEpic(id:number) {
        return this.getEpics()
               .pipe(filter(epic => epic.id === id))
               .subscribe(x=>...);
      }

구독해야 합니다.Observablehttp 호출은 JavaScript에서 비동기이므로 데이터를 가져옵니다.

getEpic(id: number, callback: (epic: Epic) => void) {
    this.getEpics().subscribe(
        epics: Array<Epic> => {
            let epic: Epic = epics.filter(epic => epic.id === id)[0];
            callback(epic);
        }
    );
}

이 메서드를 다음과 같이 호출할 수 있습니다.

this.someService.getEpic(epicId, (epic: Epic) => {
    // do something with it
});

사용하려는 모든 사용자에게flatMap현재는 더 이상 사용되지 않으며 rxJs는 사용을 권장합니다.mergeMap대신.

언급URL : https://stackoverflow.com/questions/37991713/simple-filter-on-array-of-rxjs-observable