Data is not showing. Ng-reflect-ng-for-off:null?

问题

Hi i am trying to bind a data from firebase. And I'm not getting errors but data is not showing. In inspect element i'm getting

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

My app.component.html is

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

and my app.component.ts is

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) {}
}

if app.module.ts is needed i can add it. So the thing is how to get rid of that ng-reflect thing and show my data. Thank you

回答1:

The ng-reflect-ng-for-of comment is binding information for Angular. Those comments will still exist, even in production, though they may be empty there.

Are you excluding code from your app.component.ts in your post?

Your issue is probably caused by the items property not being set in your component. Since you're using the async pipe, you are implying that you are expecting items to be an observable. Try setting your items property as follows:

@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();
    }
}

More information can be found in the Angular Firestore documentation.

来源：https://stackoverflow.com/questions/49616453/data-is-not-showing-ng-reflect-ng-for-offnull

标签

angular

angularfire

angularfire2