为什么值在控制台中但未显示在页面中？

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

就像@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

.game-stopped .game-element{display:none;}