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（）方法，该方法输出其类型。假设您的“数据”具有“名称”属性，您可以执行以下操作：

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

我想你也可以做到

{{ config$ | async | json }}

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

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

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