Ошибка: не удается найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы

Question

Я застрял с ошибкой = Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы. На самом деле, я хочу создать список уведомлений, и я не знаю, какую ошибку я допустил.

Я застрял с ошибкой = Невозможно найти отличающийся вспомогательный объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы. На самом деле, я хочу создать список уведомлений и не знаю, какую ошибку я совершил.

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 1011 *
• angular не будет выдавать ошибку при нулевом значении
• , создание локально notify не решило проблему.

Тогда доступны только те решения / проблемы, которые я вижу:

• Вы просматриваете HTML, который не соответствует файлу .ts, с которым вы работаете или
• res['notification'] видоизменяется в вашем commonService и notify получает это изменение.

Sidenote:

• В вашем 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>