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

Question

Getting an error in console

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

component.ts

export class NotificationComponent implements OnInit {
    notifications: Notification[] = [];

    ngOnInit() {
        this.notifications = [
            { 
                field: { 
                    name:"Commodity", 
                    description: "Commodity",
                    oldValue: "test",
                    newValue:"test1", 
                    message: "message"
                },
                isActive: true, 
                CreatedBy: "sri", 
                CreatedDate: new Date(), 
                UpdatedBy: "sri", 
                UpdatedDate: new Date(),
                ClientId: "client id", 
                Id: 2, 
                Guid: "guid" 
            },
            {
                field: { 
                    name:"ArrivalDate",
                    description: "Arrival Date",
                    oldValue: "test2",
                    newValue:"test2",
                    message: "message"
                },
                isActive: true, 
                CreatedBy: "sri", 
                CreatedDate: new Date(), 
                UpdatedBy: "sri", 
                UpdatedDate: new Date(),
                ClientId: "client id", 
                Id: 2, 
                Guid: "guid"
            }
        ];
    }
}

In my html template:

<ul >
    <li *ngFor="let n of notifications"> 
            <span>{{n.field.name}} </span>  
    </li>
</ul>

Answer 1

With the JSON you provided above, it works good! just verify the JSON in the sample and yours are matching,

STACKBLITZ DEMO

Answer 2

From your comment above, it looks like you've got both a template reference called notifications and a variable of type Notification[] which contains your notifications.

Try changing one of the names to make sure they don't share the same.