【问题标题】：Eror: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2020-05-23 07:10:34
【问题描述】：

我遇到了错误 = 找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。其实我想做个通知列表，不知道自己犯了什么错误。

HTML

<ng-container *ngIf="notificationModal">
      <div class="side-panel__notif-container">
        <div class="side-panel__notify-header">
        <span class="side-panel__usr-profile-close" (click)="clkNotifcationPnl()">
          <fa-icon [icon]="faClose"></fa-icon>
        </span>
        <span class="side-panel__usr-noti-hdr">Notifications</span><br>
      </div>
      <div class="side-panel__notify-body">
        <div class="side-panel__user-notif-cont">
          <div class="drop-content">
         <ul class="mt-2 list-group notify-contents">
          <li *ngFor="let items of notify">
            <div class="col-md-3 col-sm-3 col-xs-3">
              <div class="notify-img">
                <span [ngStyle]="{'background-image': loadProfilePic()}" class="side-panel__user-notif-img fa"></span>
              </div>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9 pd-l0">{{items.notifyFromName}}
             <p>{{items.notifyMessage}}</p> 
            <p class="time">{{items.notifyDate}}</p>
            </div>
          </li>

        </ul>
        </div>

        </div>
      </div>
      </div>
    </ng-container>

组件

public onClickUserNotif() {
   this.headerService.isLoading = true;
    return this.commonService.getNotificationList().subscribe((res) => {
      if (res['status'].code === 0) {
        this.headerService.isLoading = false;
        let notify = res['notification']
        if(notify.length > 0) {
          this.notificationModal = true;

          console.log(notify);


        }

      }
    });

  }

当我console.log(notify)时这个值出来了

【问题讨论】：

notify 的作用域不是类，而是一个函数。 this.notify = res['notification'] 会有意义
我已经按照你的代码，但是当我点击打开通知时，我仍然收到这个错误Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
@Pravu 是否为您提供了 line number 的错误信息？错误发生在哪里？
@DaneBrouwer 发生的错误`
`

【解决方案1】：

let notify = res['notification']

创建块级作用域，本地作用域永远不会反映这个值。 Angular 绑定到本地范围，而不是块级别。所以你需要在该函数之外绑定一个局部变量。

class ComponentName {
    notify: any[];
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}

编辑：

我们知道以下内容。

在我的建议之前，您没有本地范围的notify
angular 不会在 null 值上引发错误
创建本地范围的notify 并没有解决问题。

那么我能看到的唯一解决方案/问题是：

您正在查看的 HTML 与您正在使用的 .ts 文件不对应，或者
res['notification'] 正在您的 commonService 中发生变异，notify 正在接收该更改。

旁注：

在您的ngOnInit 中，您订阅的服务与您在其他功能中订阅的相同服务。我不明白你为什么要重新订阅。
您使用takeWhile() 来尝试减少活动订阅，但是您只影响外部订阅。不是内部订阅。

【讨论】：

我已经按照你的代码，但是当我点击打开通知时，我仍然收到这个错误Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
您可以添加完整的 .ts 文件吗？我偷偷怀疑你在其他地方绑定this.notify
@Pravu 我列出的哪些问题是原因？
我认为问题来自commonService

【解决方案2】：

我建议你安全起见，确保你始终拥有这个数组：

class ComponentName {
    notify: any[] = []; // assign an empty array
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}

// In the template, use the ? to indicate that the might be no properties yet: 
            <div class="col-md-9 col-sm-9 col-xs-9 pd-l0">{{items?.notifyFromName}}
             <p>{{items?.notifyMessage}}</p> 
            <p class="time">{{items?.notifyDate}}</p>
            </div>

【讨论】：

按照他给Cannot find a differ supporting object '[object Object]'的错误，notify是明确定义的，但是作为一个对象，而不是作为一个数组。