Angular2 服务返回未定义

Question

由于某种原因，我的服务无法正常工作。我已经潜伏了两天试图找到类似的问题，但它们不适合我的问题。

Service.ts：

import { Injectable } from '@angular/core';
import {  Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { CarObject } from './make';

@Injectable()
export class EdmundsService {
  private stylesurl = 'REDACTED';

 constructor(private http: Http) { }

 getCars(): Observable<CarObject[]> {
   return this.http.get(this.stylesurl)
   .map(this.extractData)
   .catch(this.handleError);
  }

  private extractData(res: Response) {
   let body = res.json();
   return body.data || { };
  }
  private handleError (error: Response | any) {
  // In a real world app, we might use a remote logging infrastructure
   let errMsg: string;
   if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
     } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

这些是我的“模型”：

class Style {
  id: number;
  name: string;
  make: Make;
  model: Model;
  year: Year;
  submodel: Submodel;
  trim: string;
  states: string[];
  engine: Engine;
  transmission: Transmission;
  options: Options[];
  colors: Color[];
  drivenWheels: string;
  numOfDoors: string;
  squishVins: string[];
  categories: Categories;
  MPG: MPG;
  manufacturerOptionCode: string;
 }

export class CarObject {
styles: Style[];
stylesCount: number;
}

我的组件：

import { CarObject } from './make';
import { EdmundsService } from './edmunds-search-result.service';

@Component({REDACTED
providers: [EdmundsService] })


export class EdmundsSearchResultComponent implements OnInit {
  cars: CarObject[];
  errorMessage: string;



  constructor(private _edmundsService: EdmundsService) { }

   getCars(): void {
     this._edmundsService.getCars()
     .subscribe(
      cars => this.cars = cars,
      error =>  this.errorMessage = <any>error);
   }


  ngOnInit(): void {
   this.getCars();
  }

}

组件 HTML： {{汽车.stylesCount |异步 }}

示例 API 响应：http://pastebin.com/0LyZuPGW

错误输出：

EXCEPTION: Error in ./EdmundsSearchResultComponent class 
EdmundsSearchResultComponent - inline template:0:0 caused by: 
Cannot read    property 'stylesCount' of undefined

1. CarObject 旨在匹配 API 响应，因此可以删除数组括号 ( [] )
2. 我不知道为什么尽管密切关注英雄之旅 HTTP/服务教程，但它不会在我的模板上显示对象数据。

我想要做的是从变量“styleurl”发出一个 HTTP 请求（我看到这是通过检查 chrome 开发工具中的“网络”选项卡成功发出的。）使用这个 API 响应，我希望我的 CarObject '消费 json 响应，并可供我的组件/模板使用。

Answer 1

在您的组件中，您保留了 car 属性，但您没有对其进行初始化，因此它仍然是 undefined。

在您的 HTML 呈现时，承诺尚未实现，您的 car 仍然是 undefined，但您尝试从中访问属性。

几个解决方案：

预设：

cars: CarObject = new CarObject(); // or <CarObject>{}

在模板中使用 elvis 运算符：

 {{ cars?.stylesCount }}

使用ngIf：

 <div *ngIf="cars">{{ cars.styleCount }}</div>

可能还有其他几种方法可以处理这种情况。

请参阅底部关于您使用 async 管道的更新。它可能也会导致您尝试使用它的方式出现错误。

---

此外，我建议阅读 TypeScript 类型以及 angular 和 typescript 的一般最佳实践，尤其是关于模型、接口等的使用。使用 Observables 代替 Promises 也是一个好主意。 您的代码中存在一些问题，所以这只是一个提示，但我认为在这里详细说明它们没有位置，也不是您问题的根源。

希望我能帮上忙。

---

更新：

关于您对async 管道的使用：

异步管道订阅 Observable 或 Promise 并返回它发出的最新值。

您在CarObjects 的array 上使用它，顺便说一句，它不应该是一个数组。 看看the documentation for the async pipe for proper usage.