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

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>