尝试显示来自 Firebase 可观察对象的对象属性时出现错误"TS2571: Object is of type 'unknown'"

Question

我正在学习一个教程，该教程至少是Angular旧版的7个版本。我预计必须处理不推荐使用的代码，但我找不到最近的例子来说明如何做同样的事情。我只想显示Observable中包含的json对象的属性。

以下是app.component.ts:的代码

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
author$;
constructor(private db: AngularFireDatabase) {
this.author$ = db.object('/authors/1').valueChanges();

}
}

在标记中，

<p>
{{ (author$ | async).name }}
</p>

将在标题中产生错误。然而，如果我改为写：

<p>
{{ author$ | async | json }}
</p>

网页将完全显示对象：

{"isPremium"：true，"name"："name name"，"students"：100}

那么我如何使用插值来渲染特定内容呢？我可能还应该说，该教程是关于使用"；作为"；关键字，将此代码缩写为以下内容：

<ul *ngIf="author$ | async as author">
<li>{{ author.name }}</li>
<li>{{ author.isPremium }}</li>
<li>{{ author.students }}</li>
</ul>

Answer 1

我可以通过更改声明author$属性的方式来实现它。以前我声明它没有类型。现在它在这样声明后正常工作：

export class AppComponent {
author$: Observable<any>;
...

带有标记：

<ul *ngIf="author$ | async as author">
<li>{{ author.name }}</li>
<li>{{ author.isPremium }}</li>
<li>{{ author.students }}</li>
</ul>

我还应该注意到，如果属性被正确地声明为，@ck706提供的语法也可以工作

Answer 2

很确定这应该适用于未知类型。我假设Firebase返回一个匿名对象。如果它返回一个JSON字符串，则可能需要在等式中使用JSON.parse((。

<ul *ngIf="author$ | async as author">
<li>{{ author['name']}}</li>
<li>{{ author['isPremium'] }}</li>
<li>{{ author['students'] }}</li>
</ul>