Javascript 如何将异步管道过滤为角度子组件

TL，DR我已成功地将的输出传递到子组件中。但是，当条件失败时（

filter=>false

），我希望传入以前从可观察对象发出的值

细节

使用，我订阅了以下两部分：

…虽然上面有三个部分，但这个问题只涉及

脏的

和

数据

减速器有三种情况：

AppActions.获取新数据：

• 将

  pending

  设置为

  true

  以更新UI
• 导致发出HTTP请求（通过）

AppActions.获取新数据\u成功：

• 将

  pending

  设置为

  false

  以更新UI
• 将

  dirty

  设置为

  false

  ，因为未进行任何编辑

AppActions.编辑数据：

• 更新有效载荷中提供的数据
• 将

  dirty

  设置为

  true

  ，因为已进行编辑

守则：

export function appReducer(state: AppState = initialState,
    action: AppActions.All
): AppState {
    switch (action.type) {
        case AppActions.GET_NEW_DATA:
            // Action results in HTTP request.
            return {
                ...state,
                pending: true
            };
        case AppActions.GET_NEW_DATA_SUCCESS:
            // HTTP response, update data!
            return {
                data: action.payload,
                pending: false,
                pristine: true,
            };
        case AppActions.EDIT_DATA:
            return {
                ...state,
                data: action.payload,
                pristine: false
            };
        default: {
          return state;
        }
     }
 }

如前所述，使用，我订阅了智能组件中的两个片段

@Component({
  selector: 'app-smart',
  templateUrl: './smart.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SmartComponent {

  public data$: Observable<string[]>;
  public dirty$: Observable<boolean>;

  constructor(private readonly store: Store<AppState>) {
      this.data$ = this.store.select(fromReducer.getData);
      this.dirty$ = this.store.select(fromReducer.getDirty);
  }
}

…把它拆开

this.store.select（fromReducer.getData）

从使用中获取一个可观察对象

将新发出的数据$结果与

脏$

中的最新结果相结合

筛选

dirty$

是否为false。

• 如果不是脏的，我们有来自服务器的新数据，并希望更新

  ，因此可以在用户切换选项卡时删除（
  ngondestry
  ）并重新创建（
  ngonit
  ）。看
  
  如果已执行和编辑，
  dirty$
  为真。如果用户随后切换选项卡并随后返回，
  数据$
  将被过滤掉，因为
  脏$
  为
  真
  ：
  
  filter（[[uu，dirty]）=>！dirty）
  
  我已成功地将的输出传递到子
  组件中。但是当条件失败时，我想传入以前从
  数据$
  发出的值，这是我真正需要帮助的地方。
  尝试从脏的可观察数据开始创建数据的可观察数据，类似这样的
  
  this.data$ = this.store.select(fromReducer.getDirty)
  .filter(dirty=>dirty)
  .flatMap(()=>this.store.select(fromReducer. getData))
  
  这样，如果脏过滤器通过，您总是会收到新数据
  
  <!-- From within <app-smart> -->
  <app-dumb [data]="data$|async"></app-dumb>
  
  this.data$ = this.store
    .select(fromReducer.getData)
    .withLatestFrom(this.dirty$)
    .filter(([_, dirty]) => !dirty)
    .map(([tree, _]) => tree);
  
  this.data$ = this.store.select(fromReducer.getDirty)
  .filter(dirty=>dirty)
  .flatMap(()=>this.store.select(fromReducer. getData))