Angular/angularfire2报错：Cannot find a differ supporting object 求助

嘿，我来帮你搞定这个问题！这个报错本质是因为*ngFor只能遍历可迭代对象（比如数组、Map这类），如果你的offers或者嵌套的offer不是可迭代类型，Angular就会抛出这个错误。结合你的代码，咱们一步步来修复：

第一步：先明确数据结构 #

首先得搞清楚从Firebase拿到的data.service到底是什么类型——是数组？还是单个对象？在你的subscribe回调里加个日志，直观看看数据结构：

this.service.subscribe(data => {
  console.log('Firebase返回的数据:', data); // 打印出来确认结构
  // 其他代码
});

这一步是关键，后续的修复完全取决于数据的实际形态。

第二步：修正offers的赋值逻辑 #

根据日志结果，调整赋值方式：

• 如果data.service本身就是数组：
  你现在用Array.of(data.service)会把这个数组再包一层（变成嵌套数组[[...]]），这会导致第一层*ngFor拿到的是整个数组，第二层遍历才到具体元素（很多时候你不需要这种嵌套）。直接改成：

  this.offers = data.service;
  

• 如果data.service是单个对象：
  这时候需要把它转成数组才能用*ngFor，用Array.of(data.service)是对的（或者直接写[data.service]效果一致），但要注意后续模板的写法。

第三步：让模板匹配数据结构 #

你的模板现在用了两层*ngFor，得对应上offers的结构：

1. 如果offers是普通对象数组（比如每个元素是{name: 'xxx', price: 'yyy'}）：
   不需要两层遍历，直接一层就够，然后显示对象的具体属性：

   <div class="col-md-4" *ngIf="service | async as service">
     <!-- categoryes -->
     <div *ngFor="let offer of offers">
       {{ offer.name }} - {{ offer.price }} <!-- 替换成你的对象属性 -->
     </div>
   </div>
   

2. 如果offers是数组的数组（比如[[obj1, obj2], [obj3]]）：
   两层遍历是合理的，但要确保内层的offer确实是可迭代的数组。
3. 如果data.service是单个对象（比如{title: 'Estética', items: [...]}）：
   要是想遍历这个对象的键值对，可以用Angular的KeyValuePipe：

   <div class="col-md-4" *ngIf="service | async as service">
     <!-- categoryes -->
     <div *ngFor="let offer of offers">
       <div *ngFor="let item of offer | keyvalue">
         {{ item.key }}: {{ item.value }}
       </div>
     </div>
   </div>
   

额外优化建议 #

你现在同时用了async管道和手动subscribe，其实可以把offers转成可观察对象，用async管道处理，这样能避免手动订阅可能导致的内存泄漏：

this.offers$ = this.service.pipe(
  map(data => Array.isArray(data.service) ? data.service : [data.service])
);

然后模板里直接用：

<div class="col-md-4" *ngIf="service | async as service">
  <!-- categoryes -->
  <div *ngFor="let offer of offers$ | async">
    <!-- 这里根据结构写显示逻辑 -->
  </div>
</div>

内容的提问来源于stack exchange，提问作者Carlos Uriel Santiago