Javascript Angular2服务返回未定义

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

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);
  }

}

我的组成部分：

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();
  }

}

CarObject被设计为匹配API响应，因此可以删除数组括号（[]）

我不知道为什么这不会在我的模板上显示对象数据，尽管我密切关注《英雄之旅HTTP/Services》教程

---

我试图做的是从变量'styleurl'发出HTTP请求（我看到它是通过检查chrome开发工具中的'Network'选项卡成功发出的）。使用此API响应，我希望我的CarObject“使用”json响应，并可用于我的组件/模板。

在您的组件中，您保留了

汽车的
属性，但您没有初始化它，因此它仍然是
未定义的

当您的HTML呈现承诺尚未实现时，您的
汽车仍然
未定义
，但您尝试从中访问属性

两种解决方案：

预设它：

使用
ngIf
：

{{cars.styleCount}

可能还有更多的方法来处理这个案件

请参阅底部关于您使用
async
管道的更新。它可能会导致错误，以及在您试图使用它的方式


除此之外，我建议阅读TypeScript类型以及angular和TypeScript的一般最佳实践，特别是关于模型、接口等的使用。同样，使用可观测数据代替承诺也是一个好主意。
您的代码中存在一些问题，因此这只是一个提示，但我认为详细阐述这些问题在这里没有位置，也不是问题的根源

希望我能帮忙


更新：

关于
async
管道的使用：

异步管道订阅一个可观察或承诺，并返回它发出的最新值

您可以在
CarObjects
的
array
上使用它，顺便说一句，它不应该是数组。
查看组件中的您保留了
汽车的
属性，但您没有初始化它，因此它仍然是
未定义的

当您的HTML呈现承诺尚未实现时，您的
汽车仍然
未定义
，但您尝试从中访问属性

两种解决方案：

预设它：

使用
ngIf
：

{{cars.styleCount}

可能还有更多的方法来处理这个案件

请参阅底部关于您使用
async
管道的更新。它可能会导致错误，以及在您试图使用它的方式


除此之外，我建议阅读TypeScript类型以及angular和TypeScript的一般最佳实践，特别是关于模型、接口等的使用。同样，使用可观测数据代替承诺也是一个好主意。
您的代码中存在一些问题，因此这只是一个提示，但我认为详细阐述这些问题在这里没有位置，也不是问题的根源

希望我能帮忙


更新：

关于
async
管道的使用：

异步管道订阅一个可观察或承诺，并返回它发出的最新值

您可以在
CarObjects
的
array
上使用它，顺便说一句，它不应该是数组。
查看
可能的重复项，尽管问题不相同，但两个问题的答案都相同。请检查我在上述问题中的答案。@SabbirRahman我看了你的答案，仍然不知道该怎么办。请更加明确。您正在尝试访问
cars
对象的
stylescont
属性，该属性在模板首次尝试访问时未定义。要解决这个问题，您只需在声明时为cars对象指定一个空对象<代码>申报汽车：any={}
。如果你不想使用
any
你必须指定一个默认对象，而不是{}。@SabbirRahman我已经替换了我的
cars:CarObjectdeclare cars:any={}
编码>并收到以下错误
（15,3）：declare修饰符不能出现在类元素上。）
的可能重复项，尽管问题不相同，但两个问题的答案都相同。请检查我在上述问题中的答案。@SabbirRahman我看了你的答案，仍然不明白该怎么办。请更加明确。您正在尝试访问
cars
对象的
stylescont
属性，该属性在模板首次尝试访问时未定义。要解决这个问题，您只需在声明时为cars对象指定一个空对象<代码>申报汽车：any={}
。如果你不想使用
any
你必须指定一个默认对象，而不是{}。@SabbirRahman我已经替换了我的
cars:CarObjectdeclare cars:any={}
进行代码>并收到以下错误
（15,3）：声明修饰符不能出现在类元素上。）
嘿！非常感谢您的回复，但是我仍然感到不安。是的，我不介意转换成可见光，我现在就做->转换非常简单。然而，你说我的代码中有一些问题——这正是我试图解决的问题——我希望你能详细阐述一下，因为我是Angular2的新手，希望能纠正我的错误！我的意思是如何使用响应并将其声明为
CarsObject
的数组，而不仅仅是一个对象。在汽车模型中使用构造器将是一种正确的方法，因此您的服务将创建汽车实例并将其传递回视图。异步管道绑定到承诺或可观察的对象，而不是您类型的数组或对象。这也是关于最佳实践，结构/维护
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();
  }

}

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

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

 {{ cars?.stylesCount }}

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