*ngFor 项目 select 上的错误 - Angular

Question

我正在尝试使用 "ng For" 下拉菜单。我能够在下拉列表中看到我的所有条目，但是当我选择一个条目时，它开始抛出错误。错误是 "Error trying to diff '1'. Only arrays and iterable are allowed"

HTML:-

<div class="form-group">
    <label for="customerGroup">Group</label>
    <select [(ngModel)]="customerGroup" (change)="onGroupChange($event)">
        <option *ngFor="let item of customerGroup" [value]="item.groupId">{{item.groupName}}</option>
    </select>
  </div>

TS:-

private customerGroup: any[] = [{
groupId: 1,
groupName: 'Group 1'

}];

public onGroupChange(event): void { 
const groupId = event.target.value;

}

Click Here for Error screenshot

Answer 1

您还使用了数组 var 作为模型变量。为 select 使用不同的变量，它将正常工作。

<div class="form-group">
<label for="customerGroup">Group</label>
  <select name="customerGroup" [(ngModel)]="selectedCustomerGroup" (change)="onGroupChange($event)">
  <option *ngFor="let item of customerGroup" [value]="item.groupId">{{item.groupName}}</option>
  </select>
</div>

其他都一样。

  customerGroup: any[] = [{
    groupId: 1,
    groupName: 'Group 1'
  },
  {
    groupId: 2,
    groupName: 'Group 2'
  }];

  onGroupChange(event): void { 
    let groupId = event.target.value;
    //console.log(groupId);
  }

Demo Example

*ngFor 项目 select 上的错误 - Angular

*ngFor error on item select - Angular

select

ngfor

angular