Angular 5使用*ngFor渲染Firebase数据时出现Cannot find a differ错误

这个报错我太熟了，主要是两个核心问题导致的，咱们一步步排查解决：

1. 核心原因：attendee不是可迭代的数组 #

*ngFor只能遍历数组或者实现了Iterable接口的集合，而你从Firebase获取的数据大概率是键值对形式的对象（比如{ "user1": {first_name: "xxx"}, "user2": {...} }），或者你不小心把单个对象赋值给了attendee，这就会触发这个错误。

修复方法：把Firebase返回的对象转为数组 #

在你的组件代码里，获取数据后需要把Firebase返回的对象转换成数组，比如用Object.values()来提取所有值：

// 假设你是这样从Firebase获取数据的
firebase.database().ref('attendees').on('value', (snapshot) => {
  const rawData = snapshot.val();
  // 把对象转为数组，如果没有数据就赋值为空数组
  this.attendee = rawData ? Object.values(rawData) : [];
});

另外，建议在组件里把attendee初始化为空数组，避免初始值为undefined/null导致的问题：

// 组件类里的定义
attendee: any[] = [];

2. 模板变量引用错误 #

你的HTML模板里循环变量是row，但你一直在用attendee来访问属性（比如{{ attendee.first_name }}），这完全不对！应该用循环出来的row变量来访问当前项的属性：

修正后的HTML代码 #

<!-- 注意把所有attendee.xxx改成row.xxx -->
<tr *ngFor="let row of attendee">
  <td class="left">{{ row.first_name }} {{ row.last_name }}</td>
  <td class="number1">250</td>
  <td class="table1">{{ row.table }}</td>
  <td class="right-bill">Bill</td>
</tr>

做完这两步，你的表格应该就能正常渲染了～

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