刷新页面时不填充 Observable 列表

Question

关注这个话题： InvalidPipeArgument: '' for pipe 'AsyncPipe'

我试图了解为什么在使用浏览器的刷新按钮刷新页面时未在屏幕上填充/反映 Observable 列表。 当使用刷新按钮表单控件并调用相同的代码时，它可以工作。

是不是因为 Observable 数组正在被填充而不是立即填充？同时，当列表为空时，html 循环遍历列表？

当我打印到控制台响应时，我可以看到该数组确实包含实际结果（但仍未显示在屏幕上）：

callGetResources() {
    if (this.route.outlet === Constants.APP_USER) {
        // When refreshing the page, user is still not populated
        this.resourcesService.getUser()
        .subscribe( data => {
            this.resources = this.resourcesService.getResources(data.text());
//this.resourcesService.getResources(data.text()).subscribe( response => {
//console.log(response);//});
        });

还有一件事，如果不同的话，我会使用不同的选项卡和不同的插座！

constructor(private service: ResourcesService, private router: Router) {

    this.router.navigate([{ outlets: {  ['appUser'] : ['resources-list'] } }]);
}

Answer 1

如我所见，this.resourcesService.getResources(data.text()) 返回一个 observable。如果您想显示来自这个可观察对象的数据，请在模板中使用async 管道，或者将来自可观察对象的数据保存在局部变量中并在模板中显示这个变量（对不起，我的英语） 您也可以使用 mergeMap 代替嵌套订阅。

callGetResources() {
  if (this.route.outlet === Constants.APP_USER) {
    this.resources = this.resourcesService.getUser()
       .pipe(
          mergeMap(data => this.resourcesService.getResources(data.text())
       )

在模板中使用resources | async

或使用局部变量

callGetResources() {
  if (this.route.outlet === Constants.APP_USER) {
    this.resourcesService.getUser()
       .pipe(
          mergeMap(data => this.resourcesService.getResources(data.text())
       )
       .subscribe(resources => this.resources = resources);