in Angular 2 , Cannot find a differ supporting object '[object Object]' of type 'leaveType'. NgFor only supports binding to Iterables such as Arrays

0
votes

I searched and explore for this problem and got the solution but they didn't work for me, I want to show a static data/list in my dropdown options in typescript, I am using an array of object leaveType. But when I am doing this then got this error:

ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'leaveType'. NgFor only supports binding to Iterables such as Arrays.

please suggest where I am doing wrong.

My code is:

team-component.ts

import { Component, OnInit, HostBinding                       } from '@angular/core';
import { FormGroup, FormBuilder, Validators      } from '@angular/forms';
import { IMyOptions, IMyDateModel                } from 'mydatepicker';
import { CONSTANT                                } from '../../constants/dash-constant';
import { TeamService                             } from '../../services/team-component.service';
import { slideInDownAnimation                    } from '../../animations/animations'

@Component({
  selector: 'team-component',
  templateUrl: `../app/modules/dashboard/dashComponents/teamComponents/team.component.html`,
  animations: [slideInDownAnimation],

})

export class TeamComponent implements OnInit {
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

  constructor(private teamService: TeamService) {
  }


  ngOnInit() {
     this.leaveType.push({ id: 0, type: 'Earned Leave' });
     console.log( this.leaveType);
    }
     private leaveType:any=[];
     public leave:any= { "employee": null, "from": null, "to": null,'leaveType':null };

 }

team-component.html:

 <div class="row">
            <h4>Leave Type:</h4>
            <div class="form-group  col-md-10">
              <select id="leaveType" class="form-control" name="leaveType" [(ngModel)]="leave.leaveType" required #leaveType="ngModel">
          <option *ngFor="let p of leaveType" [value]="p.type">{{p.type}}</option>
        </select>
              <div *ngIf="leaveType.errors && leaveType.touched" class="alert alert-danger">
                <div [hidden]="!leaveType.errors.required && leaveformSubmitted">Leave type is required</div>
              </div>
            </div>
          </div>
3
angulartypescript

3 Answers

1
votes

You have a name clash in your html.

  <select id="leaveType" class="form-control" name="leaveType" [(ngModel)]="leave.leaveType" required #leaveType="ngModel">

Your select has both name and id set as leaveType which could be taken instead of your array in *ngFor.

0
votes

You need to declare 'leaveType' as array. Like this - 

....
private leaveType: any[] = [];
public leave:any= { "employee": null, "from": null, "to": null,'leaveType':[] };
....
0
votes

leaveType should be declared as an array:

private leaveType:any[] = [];