Struggling to populate the options with server data, I tried simplifying the logic yet encountered the same error.
Here's the HTML snippet for the options:
<div class="col-md-4">
<mat-form-field class="example-full-width" *ngIf="!isAdmin; else userList">
<input matInput placeholder="Owner" type="text" [(ngModel)]="device.owner" name="owner" [disabled]="true">
</mat-form-field>
<ng-template #userList>
<div class="col-md-12" *ngIf="isUserListFilled()">
<mat-form-field>
<mat-select placeholder="List of users">
<mat-option *ngFor="let usr of userList" [value]="usr._id">
{{usr.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-template>
And here's the code used to populate the template:
export class DeviceSettingsComponent implements OnInit {
userList: any[] = [];
isAdmin = true;
constructor(private backendService: BackendService, private route: ActivatedRoute) { }
ngOnInit() {
this.userList = [{_id: "test1", name: "test name"}];
this.device = new DeviceSettings();
this.sub = this.route.params.subscribe(params => {
this.deviceId = +params['id']; // (+) converts string 'id' to a number
});
if(this.deviceId){
console.log(`Retrieving info for device with ID ${this.deviceId}`);
}
if (this.isAdmin) {
this.backendService.getUsers().subscribe(
(response) => {
if (response.users) {
let usersMapped = response.users.map(item => {
return {_id: item._id, name: item.email};
});
//this.userList = usersMapped;
console.log(this.userList);
}
},
(error) => console.log(error)
)
}
}
isUserListFilled(){
if(!this.userList) return false;
if(this.userList.length === 0) return false;
return true;
}
onOwnerChanged(event){
console.log(event);
}
Despite simplifying the code and attempting to populate the items with options, I encountered the following error:
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3161) at checkAndUpdateDirectiveInline (core.js:18623) at checkAndUpdateNodeInline (core.js:19884) at checkAndUpdateNode (core.js:19846) at debugCheckAndUpdateNode (core.js:20480) at debugCheckDirectivesFn (core.js:20440) at Object.eval [as updateDirectives] (DeviceSettingsComponent.html:33) at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432) at checkAndUpdateView (core.js:19828) at callViewAction (core.js:20069)
If anyone knows what might be causing this error, please share insights. Similar methods worked fine in other components, so unsure where potential issues may lie.