出现错误在尝试填充对象列表时找不到类型为“对象”的不同支持对象“[对象对象]”答案

【问题标题】：Getting error Cannot find a differ supporting object '[object Object]' of type 'object' while trying to populate list of objects出现错误在尝试填充对象列表时找不到类型为“对象”的不同支持对象“[对象对象]”
【发布时间】：2019-06-07 02:06:57
【问题描述】：

我正在尝试使用从服务器接收到的数据填充选项。当我遇到错误时，我尝试将逻辑简化为简单示例，但仍然遇到相同的错误。

这是用于选项的一段 html 代码：

<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>

这是填充模板的代码：

  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);
  }

无论如何，我将代码简化为简单示例并希望填充项目

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

使用选项并得到以下错误：

错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。在 NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3161) 在 checkAndUpdateDirectiveInline (core.js:18623) 在 checkAndUpdateNodeInline (core.js:19884) 在 checkAndUpdateNode (core.js:19846) 在 debugCheckAndUpdateNode (core.js:20480) 在 debugCheckDirectivesFn (core.js:20440) 在 Object.eval [as updateDirectives] (DeviceSettingsComponent.html:33) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:20432) 在 checkAndUpdateView (core.js:19828) 在 callViewAction (core.js:20069)

有谁知道什么会导致这个错误？我设法以同样的方式成功地在其他组件中填充了其他选项，因此不知道在哪里可以检查潜在问题。

【问题讨论】：

@NikoGamulin NgFor 想要排列并且您的数据是对象类型。请检查您的数据类型

标签： angular typescript angular-material

【解决方案1】：

您的userList 与#variable、模板名称冲突

#userList //template name

区分它，它应该可以工作。

<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

【讨论】：