angular - 数据未显示。 ng-reflect-ng-for-off :null?

Question

您好，我正在尝试从 firebase 绑定(bind)数据。我没有收到错误，但数据没有显示。在检查元素中我得到

<!--bindings={
  "ng-reflect-ng-for-of": null
}-->

我的 app.component.html 是

<ul>
    <li *ngFor="let item of items | async">
        {{item.title}}
    </li>
</ul>

我的app.component.ts是

import { Component } from "@angular/core";
import { AngularFirestore } from "angularfire2/firestore";
import { Observable } from "rxjs/Observable";
import { AngularFire, FirebaseListObservable } from "angularfire2";


@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";

  constructor(db: AngularFirestore) {}
}

如果需要 app.module.ts 我可以添加它。所以问题是如何摆脱那个 ng-reflect 东西并显示我的数据。谢谢

Answer 1

ng-reflect-ng-for-of 注释是 Angular 的绑定(bind)信息。这些评论仍然存在，即使在生产中，尽管它们可能在那里是空的。

您是否在帖子中排除了 app.component.ts 中的代码？

您的问题可能是由于您的组件中未设置 items 属性引起的。由于您使用的是 async 管道，因此您暗示您期望 items 是可观察的。尝试按如下方式设置您的 items 属性:

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "app";
    items: Observable<{title: string}>;

    constructor(db: AngularFirestore) {
        this.items = db.collection<{title: string}>('items').valueChanges();
    }
}

更多信息可以在 Angular Firestore documentation 中找到.