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

Question

当前的行为是什么？

我正在尝试获取自定义类型的 observable

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() 方法，该方法输出其类型。假设您的“数据”有一个“名称”属性，您可以这样做：

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

我想你也可以这样做

{{ config$ | async | json }}

json 管道将json的内容字符串化。

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

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