解决ERROR Error: Cannot find a differ supporting object ‘[object Object]‘

最新推荐文章于 2025-08-31 16:02:59 发布

原创最新推荐文章于 2025-08-31 16:02:59 发布 · 4.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#经验分享

经验分享专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一个关于 Angular 中 NgFor 指令使用的常见错误，并提供了修复方案。问题出现在使用 NgFor 遍历对象而非数组时，导致页面出现错误提示。文章详细解释了错误原因，并给出了正确的代码实现。

前提：最近新增一个标签html页面新增如下代码:

 <ng-container *ngFor="let item of this.secondLevelModalData">
        <li class="publish-li" (click)="publishClick(item)">
          <div class="publish-li-clicle">
            <img class="li-img" src="{{item.icon}}"
              onerror="this.src='assets/laijian/home_icon_recommend-zhufang@3x.png'" />
          </div>
          <p class="li-p">{{item.label}}</p>
        </li>
      </ng-container>

结果页面报错：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3368)
    at checkAndUpdateDirectiveInline (core.js:22102)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)
    at Object.eval [as updateDirectives] (SharePageComponent.html:127)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkAndUpdateView (core.js:23307)
    at callViewAction (core.js:23548)

原因是因为当前传入的参数是一个对象，改成数组即可。

像下面这样：

<ng-container *ngFor="let item of this.secondLevelModalData.data">
        <li class="publish-li" (click)="publishClick(item)">
          <div class="publish-li-clicle">
            <img class="li-img" src="{{item.icon}}"
              onerror="this.src='assets/laijian/home_icon_recommend-zhufang@3x.png'" />
          </div>
          <p class="li-p">{{item.label}}</p>
        </li>
      </ng-container>