CODEWITHSUNDEEP
angularselectngfor
Ankit Rajpoot
Ankit Rajpoot

Reputation: 87

*ngFor error on item select - Angular

I am trying to dib dropdown with "ng For". I am able to see all my entries in drop down but when I am selecting an entry it starts throwing an error. The error is "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

Upvotes: 2

Views: 716

Answers (1)

Shantanu
Shantanu

Reputation: 3513

You've used array var for model variable also. Use different variable for select & it'll work fine.

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

Keey everything else same.

  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

Upvotes: 2

Related Questions