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

Viewed 120

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.

1 Answers

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

Related