Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

Question

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

I am facing an error that says "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." I am trying to create a Notification list but I can't figure out what mistake I have made.

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);


        }

      }
    });

  }

And this value is displayed when I console.log(notify)

https://i.stack.imgur.com/M9m0h.png

angular typescript notifications

Answer 1

Answer №1

let notify = res['notification']

This code creates block level scope, which means the local scope will not reflect this value. Angular binds to local scope, not block level scope. Therefore, you need to bind a local variable outside of that function.

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

Edit:

Here are some key points:

Before my suggestion, there was no locally scoped notify.
Angular does not throw an error on a null value.
Creating the locally scoped notify did not resolve the issue.

Therefore, the only possible solutions or issues I see are:

You might be looking at HTML that does not correspond to the .ts file you are working with, or
The res['notification'] is being altered in your commonService and the notify variable is reflecting those changes.

Sidenote:

In your ngOnInit function, you are subscribing to the same service as in your other function. It seems unnecessary to resubscribe.
Although you use takeWhile() to manage active subscriptions, it only affects the outer subscription, not the inner one.

Answer 2

let notify = res['notification']

This code creates block level scope, which means the local scope will not reflect this value. Angular binds to local scope, not block level scope. Therefore, you need to bind a local variable outside of that function.

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

Edit:

Here are some key points:

Before my suggestion, there was no locally scoped notify.
Angular does not throw an error on a null value.
Creating the locally scoped notify did not resolve the issue.

Therefore, the only possible solutions or issues I see are:

You might be looking at HTML that does not correspond to the .ts file you are working with, or
The res['notification'] is being altered in your commonService and the notify variable is reflecting those changes.

Sidenote:

In your ngOnInit function, you are subscribing to the same service as in your other function. It seems unnecessary to resubscribe.
Although you use takeWhile() to manage active subscriptions, it only affects the outer subscription, not the inner one.

Answer 3

Answer №2

It is highly recommended to err on the side of caution and ensure that you always maintain this array:

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

// When referencing the properties in the template, use the ? to handle potential absence of properties: 
            <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>

Answer 4

It is highly recommended to err on the side of caution and ensure that you always maintain this array:

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

// When referencing the properties in the template, use the ? to handle potential absence of properties: 
            <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>

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

Answer №1

This code creates block level scope, which means the local scope will not reflect this value. Angular binds to local scope, not block level scope. Therefore, you need to bind a local variable outside of that function.

Here are some key points:

Therefore, the only possible solutions or issues I see are:

Sidenote:

Answer №2

Similar questions

Exploring the process of linking a C# REST API to an Ionic 2 mobile application

Enhancing JSON data: Transforming basic JSON structure into more complex format

Obtain a filtering dropdown list directly from the database within Ag-grid

Generating a composer method in TypeScript (Flow $Composer)

Issue with implementing MUI Style Tag in conjunction with styled-components and Typescript

What is the significance of the IRenderFunction interface definition in FluentUI?

Setting the selected <ion-option> in Ionic 3

Exploring Objects within an Array in Ionic 2 and AngularJS 2

Testing onClick using Jest when it is not a callback function in props

A guide on renewing authentication tokens in the Nestjs framework

Adjust text size based on device orientation changes

Exploring Typescript's null chain and narrowing down types

Reversing ngModel modifications does not accurately display changes in the view

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

Angular2 RxJS stream initiates an individual HTTP call for every child in the parent collection

The function column.getHeaderGroupProps does not seem to be available

Tips for finding the displayRows paragraph within the MUI table pagination, nestled between the preceding and succeeding page buttons

Angular: Merge two Observables to create a single list and fetch the combined data

Exciting new venture utilizing Angular version 15 in combination with the latest Firebase 9

The operation of assigning the value to the property 'baseUrl' of an undefined object cannot be executed