After an extensive search and exploration for a solution to my problem, I found one, but unfortunately it didn't work as expected. The issue at hand involves displaying static data/list in dropdown options using TypeScript. Currently, I am working with an array of objects called leaveType. However, when attempting this, I encountered the following error:
ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'leaveType'. NgFor only supports binding to Iterables such as Arrays.
I would greatly appreciate any guidance on where I may be going wrong.
Here is my code snippet:
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>