我想从 api 中检索数据到下拉列表,但我不知道我的代码有什么问题。
API 结果:
[{"projectId":2,"projectName":"test","gates":[]},{"projectId":3,"projectName":"project1","gates":[]}]
服务模型(project.ts):
export class Project{
projectName: string;
projectId :number;
}
我的 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',[]))
);
}
}
如果我在应用程序运行时查看网络,会显示来自 API 的数据,但不会显示在下拉列表中。
最佳答案
只需尝试用您的 html 下拉代码替换它。它会起作用。因为你不需要检查*ngFor
中的productName
,*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>
关于angular - 下拉列表不会填充 Angular 中的 API 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53738984/