如何用Angular ngFor访问Firebase HTTP返回数据的内部字段

从你页面显示的结果来看，每个item.value其实是一个包含单个消息对象的数组，而不是直接的消息对象——这就是你没法直接访问name、message等字段的核心原因。下面是分步骤的解决方案：

1. 直接修改HTML模板（快速修复） #

你可以在模板里先取出数组中的唯一对象，再访问它的属性：

<div *ngFor="let item of Message | keyvalue">
  <div class="message-card">
    <p><strong>姓名：</strong> {{ item.value[0].name }}</p>
    <p><strong>留言：</strong> {{ item.value[0].message }}</p>
    <p><strong>邮箱：</strong> {{ item.value[0].email }}</p>
    <p><strong>电话：</strong> {{ item.value[0].phone }}</p>
    <hr>
  </div>
</div>

这里item.value[0]就是数组里的那个消息对象，之后就能直接点出name、message等属性了。

2. 规范组件代码（推荐优化） #

Angular里推荐变量名用小写开头的驼峰式，同时明确类型，这样代码可读性更强：

export class MessagesComponent implements OnInit {
  // 修正变量名和类型声明
  messages: Message[] = [];

  constructor(private global: GlobalService) { }

  ngOnInit() {
    this.generateMessages();
  }

  // 方法名也统一规范
  generateMessages(){
    this.global.getMessages().subscribe(messages => this.messages = messages);
  }
}

记得同步把HTML里的Message改成messages，保持变量名一致。

3. 在服务层提前处理数据（更优雅的方案） #

如果希望模板更简洁，可以在服务里提前把嵌套的数组结构扁平化，这样就不需要用keyvalue管道了：

getMessages(){
  return this.http.get('https://bigproject-dd88e.firebaseio.com/data.json')
    .map((response: Response) => {
      const data = response.json();
      // 遍历返回的对象，把每个值（数组）里的第一个元素提取出来
      return Object.values(data).map(itemArray => itemArray[0]);
    })
    .catch((error: Response) => {
      return Observable.throw('something went wrong');
    });
}

修改后，HTML模板可以简化成这样：

<div *ngFor="let message of messages">
  <div class="message-card">
    <p><strong>姓名：</strong> {{ message.name }}</p>
    <p><strong>留言：</strong> {{ message.message }}</p>
    <p><strong>邮箱：</strong> {{ message.email }}</p>
    <p><strong>电话：</strong> {{ message.phone }}</p>
    <hr>
  </div>
</div>

补充说明 #

之所以会出现当前的显示效果，是因为你从Firebase获取的data.json结构是一个键值对对象，每个键对应的是一个包含单个消息对象的数组。用keyvalue管道遍历后，每个item.value就是这个数组，所以必须先取出数组内的对象才能访问内部字段。

内容的提问来源于stack exchange，提问作者louay jaber