Почему значения отображаются в консоли, но не отображаются на странице?

Question

Значения не отображаются на странице, но отображаются в console.log

//app.components.ts
    import { Component } from '@angular/core';
import {AngularFireDatabase } from 'angularfire2/database';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  posts: any[];
  constructor(db: AngularFireDatabase){
    db.list('posts').valueChanges().subscribe(posts => {  this.posts = posts; console.log(this.posts); });

  }
}

//app.component.html

    <ul>
  <li *ngFor="let post of posts">
{{post.$value}}
  </li>
</ul>

// firebase

Answer 1

<ul>
  <li *ngFor="let post of posts">
{{post}}
  </li>
</ul>

Answer 2

Как упомянул @Peter Haddad, вы должны добавить {{post}} вместо {{post.$value}} в список, например:

<ul>
  <li *ngFor="let post of posts">
{{post}}
  </li>
</ul>

Подробнее об этом: https://angular.io/guide/displaying-data#add -logi c -to-l oop -through-data

Надеюсь, это поможет! :)