错误：找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

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

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)

时，这个值就出来了

Answer 1

let notify = res['notification']

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

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

编辑：

我们知道以下内容。

在我建议之前，您没有本地范围的 notify
angular 不会对空值抛出错误
创建局部范围 notify 没有解决问题。

那么我能看到的只有solutions/issues是：

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

旁注：

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

Answer 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>

错误：找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

Eror: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

notifications

typescript

angular

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

我们知道以下内容。

那么我能看到的只有solutions/issues是：

旁注：