I have an array declared as carousels: any = [] in my TS file but I keep getting an error stating 'only arrays and iterables allowed' whenever I loop over it using *ngFor. The data inside this array is acquired from mLab.
The goal of my code is to update an object from mLab using its id which seems to work fine. But whenever I press the update, given the fact that the update even works, why do I still get the error?
I have tried to change carousels: any = [] to just carousels = [] but it doesn't seem to change anything.
This is my code.
api.js (backend) - this is the code that communicates with the database.
router.route('carousel/update/:_id).put(function(req, res) {
db.collection('home').updateOne({"_id": ObjectId(req.params._id)}, {$set: req.body}, (err, results) => {
if (err) throw err;
res.send(results)
console.log(req.params._id)
});
});
home.service.ts
return this.http.put<any[]>('./api/carousel/update/' + id, {'header': newheader, 'subheader': newsubheader})
}
component.ts
declaration:
carousels: any = [];
update function:
updateSlide(id: number){
this.HomeService.updateSlide(id, this.header, this.subheader).subscribe(slides => {this.carousels = slides})
}
Update works but I still get the Error: error trying to diff '[object object]'. only arrays and iterables are allowed
The .updateOne({}) doesn't return a list of objects, but an object with the information about the row updated.
You are returning that Object from the API and then setting it in the updateSlider() in your component, where you should be setting an array instead.
Try to log the results in the api or slides in the Subscription, and you should be able to see the issue.