Получение ошибки Невозможно найти отличающийся вспомогательный объект '[object Object]' типа 'object' при попытке заполнить список объектов

Question

Я пытаюсь заполнить параметры данными, полученными с сервера. Когда я получил ошибку, я попытался свести логику к простому примеру, но все равно получаю ту же ошибку.

Это 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 поддерживает только привязку к итерациям, таким как массивы. на NgForOf.push ../ node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js: 3161) at checkAndUpdateDirectiveInline (core.js: 18623) at checkAndUpdateNodeInline (core.js: 19884) в checkAndUpdateNode (core.js: 19846) at debugCheckAndUpdateNode (core.js: 20480) at 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)

Кто-нибудь знает, что может вызвать эту ошибку? Мне удалось успешно заполнить другие параметры в других компонентах таким же образом, и поэтому я не знаю, куда еще можно обратиться за потенциальными проблемами.

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>

демо