要解决Angular 9从API调用的数据没有填充下拉列表的问题,你可以按照以下步骤进行操作:
dropdown.service.ts
的服务,用于从API获取数据。import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DropdownService {
constructor(private http: HttpClient) { }
getDropdownData() {
return this.http.get('API_URL'); // 将API_URL替换为实际的API地址
}
}
DropdownService
来获取数据。import { Component, OnInit } from '@angular/core';
import { DropdownService } from '../dropdown.service';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
dropdownData: any[];
constructor(private dropdownService: DropdownService) { }
ngOnInit() {
this.dropdownService.getDropdownData().subscribe(
data => {
this.dropdownData = data;
},
error => {
console.log(error);
}
);
}
}
ngFor
指令来循环遍历下拉列表的数据。
确保将
添加到父组件的模板中,以便显示下拉列表。
请注意,上述代码中的API_URL
应该被替换为实际的API地址,以便从API获取数据。确保API返回一个数组,数组中的每个元素包含label
和value
属性,以便正确填充下拉列表选项。
以上是一个基本的解决方法,你可以根据你的具体需求进行修改和扩展。