Getting error Cannot find a differ supporting object '[object Object]' of type 'object' while trying to populate list of objects

Niko Gamulin

I am trying to populate the options with the data received from the server. As I got an error, I tried to reduce the logic to simple example but still I get the same error.

This is the piece of html code used 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 this is the code for populating 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);
  }

Anyway, I reduce the code to simple example and wanted to populate the item(s)

this.userList = [{_id: "test1", name: "test name"}];

with options and got 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)

Does anyone know what could cause this error? I managed to successfully populate other options in other components the same way and therefore don't know where else to chesk for potential issues.

Just code

Your userList is conflicting with the #variable, template name

#userList //template name

differentiate it and it should work.

<ng-template #userList>//template name is useList
    <div class="col-md-12" >
        <mat-form-field>
            <mat-select placeholder="List of users">
                <mat-option *ngFor="let usr of userList" [value]="usr.id">//userlist as 
an array
                    {{usr.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</ng-template>

demo

Collected from the Internet

Please contact [email protected] to delete if infringement.