CODEWITHSUNDEEP
angulartypescriptangular4-forms
javauser
javauser

Reputation: 35

Angular 4 populate dropdown not working

In my component I am getting the response from REST but unable to populate the same in dropdown.

Component: 

jobTitleList() {
    this.jobList = this.getJobList().then((result) => {
        this.jobList = result;
        console.log('result is : ', this.jobList );
    });
}

On console I am getting : result is : ["Software Developer","Support Engineer"]

HTML select/dropdown: 

 <select (focus)="jobTitleList()">
   <option *ngFor="let jobTitle of jobList" value="">{{jobTitle}}</option>
 </select>

I am getting empty select box on my screen. Please help. I followed many posts but did not help. Thanks in advance.

Upvotes: 3

Views: 2746

Answers (1)

Dmitry Grinko
Dmitry Grinko

Reputation: 15204

job: IJob;
jobList: IJob[];

jobTitleList() {
    this.getJobList().then(result => {
        this.jobList = result;
    });
}

<select [(ngModel)]="job" (focus)="jobTitleList()">
   <option *ngFor="let j of jobList" [value]="j">{{ j }}</option>
</select>

Upvotes: 1

Related Questions