Drop down does not populate with API data in Angular

Question

I want to retrive data to dropdown from api and I don't know what is wrong in my code.

Result of API:

[{"projectId":2,"projectName":"test","gates":[]},{"projectId":3,"projectName":"project1","gates":[]}]

Model of service(project.ts) :

export class Project{
    projectName: string;
    projectId :number;
}

Dropdown in my sidebar.component.html:

<div class="dropdown  ml-auto">
    <select (change)=selectedHandlerProjectName($event) class="btn btn-secondary dropdown-toggle" style="margin-left: -10px;border-left-width:15px;padding-left:11px;padding-right: 14px;margin-right: 12px;border-right-width: 12px">
        <option value = "default">Select project</option>
        <option *ngFor = "let projectName of selectProject?.projectName" value = {{projectName}}>{{projectName}}</option>
    </select>
</div>

Sidebar.component.ts

import { Component, OnInit } from '@angular/core';
import { Project } from '../models/Project';
import {ProjectService} from '../services/project.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  selectProject : Project;
  constructor(private projectService: ProjectService) { }

  getSelectedProject(): void{  
    this.projectService.getProjects()
      .subscribe(selectProject => this.selectProject= selectProject);
  }
  //methods to get dropdown values
  dropDownProjectName: string = '';
  selectedHandlerProjectName(event : any)
  {
    if(event.target.value != 'default') { this.dropDownProjectName = event.target.value;}
    else {this.dropDownProjectName = null;}
  }

  ngOnInit() {
    this.getSelectedProject();

  }
}

Project.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import {catchError,map,tap} from 'rxjs/operators';
import { Project } from '../models/Project';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  private urlProject = environment.baseUrl + environment.urlProject ;

  constructor(private http: HttpClient) { }

  getProjects(): Observable<any>{
    return this.http.get<Project>(this.urlProject)
    .pipe(
    catchError(this.handleError('getProject',[]))
  );
  } 
}

If i look in Network when app running , appear data from API, but in dropdown not.

could you provide a stackblitz please ?

SeleM
– SeleM

2018-12-12 08:46:55 +00:00
Commented Dec 12, 2018 at 8:46 — SeleM
– SeleM, Commented Dec 12, 2018 at 8:46
sorry, could you tell me what is a stackblitz?

Madalina
– Madalina

2018-12-12 08:53:23 +00:00
Commented Dec 12, 2018 at 8:53 — Madalina
– Madalina, Commented Dec 12, 2018 at 8:53
stackblitz.com :)

SeleM
– SeleM

2018-12-12 08:53:54 +00:00
Commented Dec 12, 2018 at 8:53 — SeleM
– SeleM, Commented Dec 12, 2018 at 8:53

Tushar Walzade · Accepted Answer · 2018-12-12 08:58:04Z

5

just try to replace it with your html dropdown code. it will works. because you don't need to check productName in *ngFor, *ngFor = "let projectName of selectProject?.projectName"

<select class="btn btn-secondary dropdown-toggle" >
    <option value="default">Select project</option>
    <option *ngFor="let project of selectProject" [value]="project.projectName">{{project.projectName}}</option>
</select>

edited Dec 12, 2018 at 8:58

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

answered Dec 12, 2018 at 8:54

Farhat Zaman

1,37910 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drop down does not populate with API data in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related