Question

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

这是用于选项的html代码：

EditText.addTextChangedListener

这是填充模板的代码：

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

带有选项，并出现以下错误：

错误错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables，例如数组。在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 [作为updateDirectives]（DeviceSettingsComponent.html：33）在Object.debugUpdateDirectives [作为updateDirectives]（core.js：20432）在checkAndUpdateView（core.js：19828）在callViewAction（core.js：20069）

有人知道什么可能导致此错误吗？我设法以相同的方式成功填充了其他组件中的其他选项，因此不知道还有什么地方可以解决潜在的问题。

Answer 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

遇到错误，尝试填充对象列表时找不到类型为“对象”的其他支持对象“ [对象对象]”

1 个答案: