Angular 5中Http toPromise()请求返回undefined，下拉框无法填充数据

兄弟，我之前也踩过Angular 5旧Http模块的坑，结合你给出的代码片段，咱们一步步排查问题，解决下拉框没数据的问题：

首先，排查最常见的几个问题点： #

• RxJS操作符没导入全：你代码里写了import 'rxjs/add/operator...'，大概率是没导入map或者catch这些核心操作符，导致Observable无法正确处理响应。
• 旧Http模块未解析响应数据：Angular 5的Http（注意不是后来的HttpClient）返回的响应需要手动调用response.json()解析JSON数据，直接拿响应对象会拿到undefined。
• 组件变量未初始化：如果下拉框绑定的变量没初始化为空数组，订阅前访问会显示undefined，而且Angular的变更检测可能不会触发。
• API请求本身有问题：比如地址写错、请求头没设置对，或者API接口根本没返回数据。

给你整理好的完整代码示例： #

1. 完善商品分类服务（item-category.ts）

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Router } from '@angular/router';
import { Globals } from '../shared/api';
import { Observable } from 'rxjs/Observable';
// 必须导入需要的RxJS操作符
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class ItemCategoryService {
  // 替换成你实际的API地址，依赖Globals里的baseUrl
  private apiUrl = `${Globals.baseUrl}/item-categories`;

  constructor(private http: Http, private router: Router) { }

  // 获取商品分类的方法，返回Observable数组
  getItemCategories(): Observable<any[]> {
    // 设置请求头，根据你的API需求调整
    const headers = new Headers({ 
      'Content-Type': 'application/json',
      // 如果需要认证，这里加token：'Authorization': `Bearer ${yourToken}`
    });
    const options = new RequestOptions({ headers: headers });

    return this.http.get(this.apiUrl, options)
      .map((response: Response) => {
        // 旧Http必须用response.json()解析数据
        const categoryData = response.json();
        console.log('API返回的原始数据:', categoryData); // 这里打印确认数据是否正常
        return categoryData;
      })
      .catch((error: any) => {
        console.error('请求商品分类失败:', error);
        return Observable.throw(error.message || '服务器请求错误');
      });
  }
}

2. 组件中调用服务并绑定数据

// 比如你的商品组件：item.component.ts
import { Component, OnInit } from '@angular/core';
import { ItemCategoryService } from './item-category';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html'
})
export class ItemComponent implements OnInit {
  // 初始化空数组，避免undefined
  categories: any[] = [];
  selectedCategory: number; // 双向绑定的选中值

  constructor(private categoryService: ItemCategoryService) { }

  ngOnInit() {
    // 组件初始化时加载分类
    this.loadItemCategories();
  }

  loadItemCategories() {
    this.categoryService.getItemCategories()
      .subscribe(
        (data) => {
          this.categories = data;
          console.log('组件拿到的分类数据:', this.categories);
        },
        (error) => {
          console.error('加载分类失败:', error);
        }
      );
  }
}

3. 模板中的下拉框绑定

<!-- item.component.html -->
<select [(ngModel)]="selectedCategory" placeholder="选择商品分类">
  <!-- 用*ngFor遍历分类数组，确保属性名和你的API返回一致 -->
  <option *ngFor="let category of categories" [value]="category.id">
    {{category.name}}
  </option>
</select>

额外注意事项： #

1. 模块导入检查：确保在你的AppModule（或对应的功能模块）中导入了HttpModule，并且把ItemCategoryService添加到providers数组里：

import { HttpModule } from '@angular/http';
import { ItemCategoryService } from './item-category';

@NgModule({
  imports: [HttpModule],
  providers: [ItemCategoryService]
})
export class AppModule { }

2. 推荐升级到HttpClient：Angular 5已经支持HttpClient（从@angular/common/http导入），它会自动解析JSON数据，代码更简洁，不容易出错。如果可以的话，建议替换成HttpClient，只需要把服务里的Http换成HttpClient，去掉response.json()，模块里导入HttpClientModule即可。

3. 验证API有效性：先用Postman或者浏览器直接访问你的API地址，确认它能正常返回JSON格式的商品分类数据，排除API本身的问题。

内容的提问来源于stack exchange，提问作者CE0