Angular-我无法在页面上显示数据

Question

由于我是angular的新手，所以我无法在component.html页面上显示数据。我得到了Observable，但无法在页面上显示。它显示 ERROR错误：找不到类型为'Prabu'的其他支持对象'[object Object]'。 NgFor仅支持绑定到Iterables（例如数组）。 在控制台上出错。请帮忙。预先感谢。

角度：

import { AngularFireDatabase } from '@angular/fire/database';    
export class AppComponent {
    author$;
    constructor(db: AngularFireDatabase) {
        this.author$ = db.object('/authors/1').valueChanges();
        this.author$.subscribe(console.log);
    }
}

HTML：

<ul class="list-group mt-3">
    <li class="list-group-item" *ngFor="let author of author$ | async">{{author}}</li>
</ul>

数据库：

在控制台上的响应：

Answer 1

这里的问题是，您正在接收对象并尝试对其进行迭代。如果要遍历对象中的键值对，则需要先将其转换为数组。您可以使用KeyValuePipe来做到这一点。

<ul class="list-group mt-3">
    <li class="list-group-item" *ngFor="let author of author$ | async | keyvalue">{{author.key}} - {{author.value}}</li>
</ul>

如果您只想在模板中显示name，则可以像下面这样

<div>
    <!-- To display another item in the object, simply replace name with the required key, eg. (author$ | async)?.students -->
    {{(author$ | async)?.name}}
</div>

您的组件现在将如下所示

import { Observable } from 'rxjs';

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

    constructor(private db: AngularFireDatabase) { }

    ngOnInit() {
        this.author$ = this.db.object('/authors/1').valueChanges();
    }
}

我已将逻辑移至ngOnInit函数，因为这是最佳实践，而不是在contructor中这样做（来源：docs）。

这是StackBlitz上的一个有效示例。

  

注意：KeyValuePipe仅适用于Angular 6+版本。

Answer 2

* ngFor对数组而不是对象起作用。您将获得Prabu的单个对象。在构造函数中，请使用以下行来获取所有作者。

db.object('/authors').valueChanges().subscribe((authors)=>{
 this.author$ = authors.
);

在模板中

<li class="list-group-item" *ngFor="let author of author$ | async">{{author.name}}</li>