时间戳

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

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

问题描述

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

这是用于选项的一段 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"}];

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

错误错误：找不到类型为“对象”的不同支持对象“[对象对象]”。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)

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

标签： angulartypescriptangular-material

解决方案

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

演示

推荐阅读