관측 가능 범위 내에서 관측 가능 범위 내에서 관측 가능을 만드는 방법

Question

이 과정에서 꺼져있을 수도 있지만 여기에 있습니다.

나는 angular2 서비스가 있습니다. 이 서비스의 데이터 소스는 localstorage가 될 것입니다 ... 나중에 http를 사용하는 DB 호출이 반환 될 때 선택적으로 업데이트됩니다. 다양한 소스가 돌아올 때 반환 된 데이터를 업데이트하고 싶기 때문에 observables를 사용하고 싶습니다. 지금은 개념을 없애기 위해 localstorage 측면을 건너 뛰었습니다 ...하지만 'backstory'를 포함하여 (왜) 내가 왜하고 싶은지에 대한 감각을 갖게되었습니다. 여러 가지 방법이 있습니다.

제 생각에는 DB에서 이벤트가되는 페이로드와 함께 관찰 가능 객체를 반환하는 getHTTPEvents() 메소드가 있습니다.

private eventsUrl = 'app/mock-events.json'; 
getHTTPEvents() : Observable<Array<any>> { 
    return this._http.get(this.eventsUrl) 
     .map(response => response.json()['events']) 
     .catch(this.handleError); // handle error is a logging method 
} 

: 그를 조롱하기 위해

(이론은 미래의 어떤 시점에서 나는 또한 거기에 편승 할 것 'getLSEvents() 메소드가 거라고 것),이 코드가

내 목표는 반환 된 이벤트를 필터링 할 수 있지만 여전히 서비스 사용자에게 관찰 가능을 반환하는 메서드를 만드는 것입니다. 그것은 내 문제가있는 곳입니다. 그 목표를 가지고, 나는 서비스의 사용자들에 의해 호출 될 공개 메소드를 가지고있다.

public getEvents(key:string,value:string) : Observable<Array<any>> { 
    var allEventsObserve : Observable<Array<any>> = this.getHTTPEvents(); 
    var filteredEventsObserve : Observable<Array<any>>; 


    allEventsObserve 
    .subscribe(
     events => { 
      for(var i=0;i<events.length;i++) { 
       if(events[i][key]==value) { 
        console.log('MATCH!!!' + events[i][key]); // THIS WORKS! 
        return new Observable(observer => filteredEventsObserve = observer); // what do I need to return here? I want to return an observable so the service consumer can get updates 
       } 
      } 
      return allEventsObserve 
     }, 
     error => console.error("Error retrieving all events for filtering: " + error)); 

}

위 작동하지 않습니다 (여기 https://coryrylan.com/blog/angular-2-observable-data-services에서 패턴을 사용하려고 시도). 나는 비디오를 많이 보았고 관측 가능성에 관한 튜토리얼을 많이 읽었지만 찾을 수있는 것은 http 관측 가능 항목을 만들고 사용하는 것 외에는 더 많은 것을 할 수없는 것 같습니다.

나는 더 새로운 관찰을 만드는이 방법을 시도 :

var newObs = Observable.create(function (observer) { 
        observer.next(events[i]); 
        observer.complete(events[i]); 
       }); 

을 그리고 적어도 그 컴파일하는 동안, 나는 확실하지 않다 방법 '복귀'를 적시에 ... 내가 할 수있는 '이벤트'가 존재하지 않기 때문에 allEventsObserve.subscribe 메소드 외부에서이를 생성하고 구독 내에서이를 "반환"할 수 없습니다. 나는 또한 어떻게 내가 다음에 '다음'을 "방아쇠를 당길"것인지 완전히 확신하지 못한다.

allEventsObserve 내의 데이터를 수정해야하며 어떻게해도 간단히 반환 할 수 있습니까? 올바른 유료 하중으로 새로운 관측 가능 (위에서 시도한 것처럼) 할 수 있습니까? 그렇다면 어떻게 작동시킬 수 있습니까? 등 ... 나는 여기를 확인했습니다 : How to declare an observable on angular2하지만 '두 번째'관찰 가능이 시작되는 방법을 따르지 않는 것 같습니다. 아마도 나는 전체 패러다임을 잘못 생각한 것일까 요?

Answer 1

RxJS 오퍼레이터 (map, filter 등)가 실제로 반환하는 것을 오해하고있는 것으로 보입니다. 해결책을 분명히하는 것으로 생각합니다. 그것은 손실 events에서 모든 데이터 이후 꽤 쓸모 예제,

allEventsObserve 
    .map(events => { 
    return 'this was an event'; 
    }) 

이 부여하지만,의 지금은 그것을 무시하자

이 간단한 예제를 생각해 보자. 위 코드의 결과는 문자열 배열이 아니거나 실제로는 Observable입니다. 이 Observable은 allEventsObserve에 의해 방출 된 이벤트 배열마다 문자열 'this was an event'을 방출합니다. 이것은 관찰자에서 연산자를 연결할 수있게 해줍니다. 체인의 각 연산자는 이전의 어떤 방식 으로든 수정 된 항목을내는 새로운 Observable을 반환합니다. 운영자.

allEventsObserve 
    .map(events => { 
    return 'this was an event'; 
    }) 
    .filter(events => typeof events !== 'undefined') 

allEventsObserve는 Observable이 allEventsObserve.map()는 Observable로 평가 분명히, 그래서 allEventsObserve.map().filter() 않습니다.

따라서 함수가 Observable을 반환하기를 기대하기 때문에 실제로는 Observable이 아닌 무언가를 반환하므로 아직 가입하지 않으려 고합니다. 그걸 염두에두고

, 당신의 코드는 다음과 같은 방법으로 다시 작성할 수 있습니다 :

public getEvents(key:string,value:string) : Observable<Array<any>> { 
    var allEventsObserve : Observable<Array<any>> = this.getHTTPEvents(); 

    return allEventsObserve 
     .map(events => { 
      var match = events.filter(event => event[key] == value); 
      if (match.length == 0) { 
      throw 'no matching event found'; 
      } else { 
      return match[0]; 
      } 
     }) 
     .catch(e => { 
     console.log(e); 
     return e; 
     }); 

} 

getEvents 이후 다시 표시 Observable을, 다른 곳 코드에서 당신이 그들과 상호 작용하는 getEvents().subscribe(events => processEvents()) 같은 일을 할 것입니다. 또한이 코드는 this.getHTTPEvents()이 Observable을 반환한다고 가정합니다.

또한 for 루프를 배열에서 작동하는 filter에 대한 호출로 변경했습니다. 이 경우 events은 평범한 JavaScript Array이므로 호출되는 filter이 RxJS 연산자 filter과 같지 않습니다.