创建一个可通过订阅计算获取其价值的Observable

Question

嗨，我正在尝试创建一个Observable，它将具有从另一个订阅中发出的值，在本例中为 ngrx Store Reducer 。

export class IsolatedAgentService {
missionList$: Observable<any>; // I need this observables subscription to emit to calculatedValue$
calculatedValue$:Observable<any>; // I need this observable to get its values from the subscription of  missionList$ subscription
missionList:any;
constructor(
    private _store:Store<any>
){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.missionList$.subscribe((val:any)=> {
        let mostIsolatedCountry:any; //will hold value of calculation
        this.missionList = val;
        mostIsolatedCountry = this.getMostIsolatedCountry(this.missionList);
        // I want tot emit mostIsolatedCountry to another subscription
    });
}

我要做什么：

export class IsolatedAgentService {
  missionList$: Observable<any>;
  calculatedValue$:Observable<any> = Observable.create((observer)=>{
    // moved this line here from the previous missionList$ subscription
    let calculated:any = this.getMostIsolatedCountry(this.missionList);
    observer.next(calculated)
  });
  missionList:any;
  calculatedValue:any;
  constructor(
    private _store:Store<any>
  ){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.missionList$.subscribe((val:any)=> {
        let mostIsolatedCountry:any; 
        this.missionList = val;
        this.calculatedValue$.subscribe((value)=>{
            this.calculatedValue = value;
        });
    });
}

当前，我基本上是在一个订阅中设置一个类属性，然后在同一订阅中，在设置了类属性之后，我调用了第二个订阅，后者从该设置的类属性中计算值。

这感觉不对，我敢肯定这不是做到这一点的方法，但是目前我缺乏rxjs /可观察的知识。

注意！我不希望通过Store Action发出计算值，我想要一个特定于类实例的Observable。

Answer 1

这是您问题的答案：

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
    }
    html {
        font-size: 16px;
    }
    body {
        background-color: #fafafa;
        background-color: #f2f2f2;
        font-family: 'Roboto', sans-serif;
        height: 100%;
        width: 100%;
        line-height: 1.8rem;
    }
    .wrapper {
        width: 70%;
        margin: 0 auto;
    }
        .nav {
        background: linear-gradient(-45deg, #57cfb0, #2ab5d3);
    }
    .nav-ul {
        display: flex;
    }
    .nav li {
        padding: 11px 30px 11px 0;
        color: #ffffff;
        cursor: pointer;
        font-weight: 500;
    }
    .nav li:nth-last-child(2) {
        margin-left: auto;
    }
    .nav li:last-child {
        padding-right: 0px;
    }
    .cities-list {
        display: flex;
        margin-bottom: 10px;
    }
    .cities-list p {
        background-color: #ffffff;
        padding: 20px;
        margin: 10px 10px 10px 0px;
        cursor: pointer;
        flex-basis: 49.5%;
        text-align: center;
    }

甚至

<div class="nav">
    <div class="wrapper">
        <ul class='nav-ul'>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>
    </div>
</div>
<div class='wrapper'>
    <div class='cities-list'>
        <p>Tokyo, Japan</p>
        <p>London, United Kingdom</p>
    </div>
</div>

查看有关NGRX外墙的更多信息：https://medium.com/@thomasburleson_11450/ngrx-facades-better-state-management-82a04b9a1e39

为什么您不公开和使用可观察对象，为什么甚至订阅服务？

您应该拥有的东西

export class IsolatedAgentService {
  missionList$: Observable<Mission[]>;
  calculatedValue$:Observable<any>;
  constructor(
    private _store:Store<any>
  ){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.calculatedValue$ = this.missionList$.pipe( 
      map( missions => this.getMostIsolatedCountry(missions) )
    );
  }
}

还有一个用于执行所需计算的选择器。

this.calculatedValue$ = this.missionList$.pipe(
    map( this.getMostIsolatedCountry )
);