ngrx/store:subscribe 工作正常但模板中的异步给出 [object Object]

Question

当前的行为是什么？

我正在尝试获取自定义类型的可观察对象

export interface ConfigurationState {
  outlet_id: number;
  api_key: string;
}

在我的组件中

@Component({
  selector: 'retail-root',
  templateUrl: './root.component.html',
  styleUrls: ['./root.component.scss']
})
export class RootComponent implements OnInit {
  public config$: Observable<ConfigurationState>;

  constructor(private store: Store<fromRoot.State>) {
    this.config$ = this.store.select(fromRoot.getConfigState);
    this.config$.subscribe(data => console.log(data));
   }

  ngOnInit() {
    console.log(this.config$);
    this.store.dispatch(new configActions.GetConfig());
  }

}

当我像下面这样使用时

{{ config$ | async }}

它给了我 [object Object] 但如果订阅，this.config$.subscribe(data => console.log(data)); 我在控制台中得到正确的对象。

有人可以帮忙吗？

Answer 1

我猜{{ config$ | async }} 调用对象的 .toString() 方法，该方法输出其类型。假设你的 'data' 有一个 'name' 属性，你可以这样做：

{{ (config$ | async).name }}

我想你也可以这样做

{{ config$ | async | json }}

json pipe 将 json 的内容字符串化。

其他选项是将异步输出设置为变量并在模板中使用

<div *ngIf="config$ | async as data">
  {{ data.name }}
  {{ data.someAttr }}
  {{ data.otherAttr }}
</div>

ngrx/store:subscribe 工作正常但模板中的异步给出 [object Object]

ngrx/store:subscribe works fine but async in template gives [object Object]

ngrx

angular

ngrx-store

ngrx-store-4.0

当前的行为是什么？