Question

我有一个Angular组件，可以从服务中获取数据并使用异步管道显示它。该服务通过ngrx选择器从存储中获取数据。

该服务中的可观察值没有发出任何值。

// TestComponent

export class TestComponent {

    test$ = this.testService.test$;
    constructor() {

        this.activatedRoute.paramMap.subscribe(paramMap => {
            const id = paramMap.get('id');
            this.testService.getDetails(id);
        });
    }
}

// TestComponent模板

<p>{{test$ | async}}</p>

// TestService

export class TestService {

    test$: Observable<string>;

    constructor(private store: Store<State>) {
    }

    getDetails(id) {
        this.test$ = this.store.select(TestSelectors.getDetailsById(id)).pipe(
            map(details => details.test)
        );
    }
}

如果获取服务后在变量中声明了变量，而不是在获取url参数后将test $赋给转换后的选择器值，则该值会在模板中正确显示。因此，我知道这与时间以及模板中的预订发生时间有关，与选择器发出值的时间有关，但是我无法弄清楚是什么问题以及如何解决它。

Answer 1

这是怎么回事：

constructor() {

    test$ = this.activatedRoute.paramMap.pipe(
      exhaustMap(paramMap => this.testService.getDetails(paramMap.get('id')))
    )
}

并在您的服务中：

getDetails(id) {
  return this.store.select(TestSelectors.getDetailsById(id)).pipe(
      map(details => details.test)
  );
}

Answer 2

创建组件后，this.testService.test $的值将分配给test $。

test$ = this.testService.test$;

但是，仅在构造函数中调用getDetails时才创建testService.test $。您的变量声明发生在构造函数之前。

我的猜测是test $变量为null或未定义，并且异步对此只是保持沉默，而不是引发异常。

这可能是解决方案：

export class TestComponent {

    public test$: Observable<any>;

    constructor(private activatedRoute: ActivatedRoute) {

        this.test$ = this.activatedRoute.paramMap.pipe(
            map(paramMap => paramMap.get('id')),
            mergeMap(id => this.testService.getDetails(id))
        );
    }
}

选择器在模板初始化后推送值时，未在异步管道中获取值

2 个答案: