Eror:找不到类型为'object'的其他支持对象'[object Object]'。 NgFor仅支持绑定到Iterables,例如数组

问题描述 投票:0回答:1

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

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>

Component

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)时出现

enter image description here

angular typescript notifications
1个回答
0
投票
let notify = res['notification']

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

class ComponentName {
    notify: any[];
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}
© www.soinside.com 2019 - 2024. All rights reserved.