时间戳

首页 > 解决方案 > *ngFor 项目选择错误 - Angular

angular - *ngFor 项目选择错误 - Angular

问题描述

我正在尝试使用“ng For”来搜索下拉菜单。我可以在下拉列表中看到我的所有条目，但是当我选择一个条目时，它开始抛出错误。错误是“尝试区分'1'时出错。只允许数组和可迭代”

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;

}

点击这里查看错误截图

标签： angularselectngfor

解决方案

您也将数组 var 用于模型变量。使用不同的变量进行选择，它会正常工作。

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

演示示例

推荐阅读