Angular 4从API获取产品列表后遍历提取名称求助

嘿，看来你已经成功通过HTTP API拿到产品列表了！接下来提取所有产品的name字段其实很简单，我来给你梳理下具体的实现步骤：

1. 确保HTTP请求正确返回产品数组 #

首先得确认你的API请求已经正确解析出产品数组——因为Angular老版本的Http模块返回的是Response对象，不是直接的JSON数据，需要先解析：

// 在你的Product.Service.TS中补充getProducts方法
import 'rxjs/add/operator/map'; // 别忘了导入map操作符

@Injectable()
export class ProductService {
  // ... 你的现有代码

  constructor(private http: Http, private kioskService: KioskService) {}

  getProducts() {
    return this.http.get('你的API地址')
      .map(response => response.json() as any[]); // 这里可以换成你定义的Product接口类型
  }
}

如果是Angular 4.3+更推荐的HttpClient模块（自动解析JSON），代码会更简洁：

// 先替换导入的Http模块
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ProductService {
  // ... 你的现有代码

  constructor(private http: HttpClient, private kioskService: KioskService) {}

  getProducts() {
    return this.http.get<any[]>('你的API地址'); // 同样建议用Product接口代替any[]
  }
}

2. 遍历数组提取name字段 #

当你在组件中调用Service拿到产品数组后，用数组的map()方法就能快速提取所有name：

// 在你的组件代码中
import { ProductService } from './product.service';

@Component({ /* ... */ })
export class YourComponent {
  productNames: string[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.productService.getProducts().subscribe(
      products => {
        // 提取所有产品的name字段
        this.productNames = products.map(product => product.name);
        console.log('所有产品名称:', this.productNames);
      },
      error => {
        console.error('获取产品列表出错:', error);
      }
    );
  }
}

3. 进阶：类型安全与异常处理 #

为了避免拼写错误和类型问题，建议定义一个Product接口：

// 新建product.ts文件
export interface Product {
  name: string;
  // 加上你需要的其他字段，比如id, price等
}

然后在Service和组件中导入这个接口，替换掉any[]：

// Product.Service.TS中
import { Product } from './product';

getProducts() {
  return this.http.get<Product[]>('你的API地址');
}

// 组件中
this.productService.getProducts().subscribe((products: Product[]) => {
  this.productNames = products.map(product => product.name);
});

如果担心某些产品没有name字段，可以先过滤再提取：

this.productNames = products
  .filter(product => product && product.name) // 过滤掉无效或无name的产品
  .map(product => product.name);

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