无法识别的可观察的儿童节点

Question

我有以下数据对象接口：（

interface MainGameObject {
        credits: Credit[];
        localisation: Localisation;
    }

我当然也声明了信用和本地化的类型）。

在我的组件中，我将我的gamedata $对象声明为可观察的，因为我希望将其与模板中的异步管一起使用。

gameData$ = of({}) as Observable<MainGameObject>;

ngOnInit() {
        this.gameData$ = this.generalService.getAllGameData();
    }

到目前为止，这效果很好。但是，如果我想在文件中其他位置的“信用”或“本地化”的子节点（例如：

getCredits()
{
console.log(this.gameData$.credits);
}

我的VS代码）说以下错误：

Property 'credits' does not exist on type 'Observable<MainGameObject>'

为什么？已专门声明了MaingameObject导入我的根对象，“信用”或“本地化”。

我可以在模板方面列出内容，即：*ngfor =“让（gamedata $ | ynnc）？打字稿文件。

Answer 1

gamedata $是可观察的，它没有credits属性，正如错误消息所说的那样。您使用async管道中的模板中使用此可观察的，它允许您订阅它，并访问它发出的值，但仅在模板中。如果您也想在组件类文件中使用它，则需要向其手动订阅。

您可以将另一个属性添加到类中，并为其分配这样的值：

ngOnInit() {
    this.gameData$ = this.generalService.getAllGameData();
    this.gameData$.subscribe(data => {
      this.gameData = data;
    })
}

但是，此方法的缺点是您必须手动取消订阅此可观察的。模板中的async管道不是这种情况，该管道自动订阅，然后在销毁组件时最终取消订阅。不这样做会在您的应用程序中创建内存泄漏。