为什么控制台中有值但页面中没有显示？

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>

//火力基地

Answer 1

正如@Peter Haddad 所说，您必须在列表中添加{{post}} 而不是{{post.$value}}，如下所示：

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

更多信息： https://angular.io/guide/displaying-data#add-logic-to-loop-through-data

希望对你有帮助！ :)

Answer 2

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