Angular中map操作始终返回undefined问题求助

我帮你定位到几个关键问题，这就是为什么你控制台一直打印undefined的原因：

1. Service 中 getProperties 函数的类型与数据处理错误 #

首先看你的getProperties方法：

• 你声明返回Observable<IProperty>，但API返回的应该是属性数组，所以泛型应该改为IProperty[]
• do操作里你把data转成字符串后push到this.properties，导致数组里存的都是字符串，后续find的时候根本找不到带propertyId的对象（字符串没有这个属性）

修正后的getProperties：

getProperties(): Observable<IProperty[]>{
  return this.http.get<IProperty[]>('http://localhost:3000/')
    .do(data => {
      // 直接把数组赋值给properties，而不是push字符串
      this.properties = data;
    })
    .catch(this.handleError);
}

2. 组件中错误的控制台打印位置 #

你在ngOnInit里调用console.log(this.getProperty(id))，但getProperty函数是**无返回值（void）**的，它内部只是发起订阅，所以打印这个函数调用自然会得到undefined。

要打印获取到的属性，应该在subscribe的回调里操作：

getProperty(id:number) {
  this.apiService.getProperty(id).subscribe(
    property => {
      this.property = property;
      console.log(property); // 在这里打印才是正确的时机
    },
    error => this.errorMessage = <any>error
  );
}

3. 额外检查点 #

• 确保你的IProperty接口确实定义了propertyId字段，且API返回的数据中这个字段的类型是number（和你传入的id类型一致）
• 确认http://localhost:3000/返回的是标准的属性数组格式，比如：

  [
    {"propertyId": 1, "name": "Property 1"},
    {"propertyId": 2, "name": "Property 2"}
  ]
  

按照上面的修改后，你应该能正确获取到对应ID的属性对象，控制台也不会再打印undefined了。

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