错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterables

Question

我陷入错误=无法找到类型为'object'的其他支持对象'[object Object]'。 NgFor仅支持绑定到数组等Iterable。实际上，我想创建通知列表，但我不知道自己犯了什么错误。

我陷入错误=无法找到类型为'object'的其他支持对象'[object Object]'。 NgFor仅支持绑定到数组等Iterable。实际上，我想制作“通知”列表，但我不知道自己犯了什么错误。

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']

这将创建块级范围，本地范围将永远不会反映该值。角度绑定到本地范围，而不是块级。因此，您需要在该函数之外绑定局部变量。

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

编辑：

我们知道以下内容。

• 根据我的建议，您没有本地范围的notify
• 角度不会在空值上引发错误
• 创建本地范围的notify不能解决问题。

然后我只能看到的解决方案/问题是：

• 您正在查看的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>