Angular 认购'；不可分配给类型

让服务在页面上显示结果时遇到问题。错误是Subscripting方法返回一个订阅类型，而我一直在尝试将其获取到products数组中。这些产品位于json文件中

设置： 我正在通过一个教程学习Angular 2。本教程已经过时，我正在使用angular的最新版本（ng-v=@angular/cli:1.4.2）。我使用ng new和ng generate设置应用程序

产品列表.component.ts

export class ProductListComponent implements OnInit {

  pageTitle = 'Product List';
  imageWidth = 50;
  imageMargin = 2;
  showImage = false;
  listFilter = '';
  products: IProductList[];
  subscription: Subscription;
  errorMessage = '';

  constructor(private _productListService: ProductListService) {
  }

  ngOnInit() {
**// ERROR - 'Subscription' is not assignable to type 'IProductList[]'**
    this.products = this._productListService.getProducts()  // ******** ERROR ******
      .subscribe(
        products => this.products = products,
        error => this.errorMessage = <any>error);
  }

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { IProductList } from './product-list';


@Injectable()
export class ProductListService {
  private _productListUrl = 'api/product-list/product-list.json';

  constructor(private _http: Http) { }

  getProducts(): Observable<IProductList[]> {
    return this._http.get(this._productListUrl)
            .map((response: Response) => <IProductList[]>response.json())
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server Error');
  }
}

导出类ProductListComponent实现OnInit{
pageTitle='产品列表'；
图像宽度=50；
图像边缘=2；
showImage=false；
listFilter=''；
产品：IPProductList[]；
认购：认购；
errorMessage=''；
构造函数（private\u productListService:productListService）{
}
恩戈尼尼特（）{
**//错误-“订阅”不可分配给类型“IPProductList[]”**
this.products=this.\u productListService.getProducts（）/*******错误******
.订阅(
products=>this.products=products，
error=>this.errorMessage=error）；
}

产品列表.服务.ts

export class ProductListComponent implements OnInit {

  pageTitle = 'Product List';
  imageWidth = 50;
  imageMargin = 2;
  showImage = false;
  listFilter = '';
  products: IProductList[];
  subscription: Subscription;
  errorMessage = '';

  constructor(private _productListService: ProductListService) {
  }

  ngOnInit() {
**// ERROR - 'Subscription' is not assignable to type 'IProductList[]'**
    this.products = this._productListService.getProducts()  // ******** ERROR ******
      .subscribe(
        products => this.products = products,
        error => this.errorMessage = <any>error);
  }

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { IProductList } from './product-list';


@Injectable()
export class ProductListService {
  private _productListUrl = 'api/product-list/product-list.json';

  constructor(private _http: Http) { }

  getProducts(): Observable<IProductList[]> {
    return this._http.get(this._productListUrl)
            .map((response: Response) => <IProductList[]>response.json())
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server Error');
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
从“./产品列表”导入{IPProductList}；
@可注射（）
导出类ProductListService{
private _productListUrl='api/product list/product list.json'；
构造函数（私有http:http）{}
getProducts（）：可观察{
返回此.\u http.get（此.\u productListUrl）
.map（（response:response）=>response.json（））
.do（data=>console.log（'All:'+JSON.stringify（data）））
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应）{
控制台错误（error）；
返回Observable.throw（error.json（）.error | |'Server error'）；
}
}

产品列表.component.html

    <tr *ngFor='let product of products | async | productFilter: listFilter' >
      <td>
        <img *ngIf='showImage' [src]='product.imageUrl' [title]='product.productName' [style.width.px]='imageWidth' [style.marging.px]='imageMargin'>
      </td>
      <td>{{product.productName}}</td>
      <td>{{product.productCode | lowercase }}</td>
      <td>{{product.releaseDate}}</td>
      <td>{{product.price | currency:'USD':true:'1.2-2' }}</td>
      <td><app-ai-star [rating] = 'product.starRating'
           (ratingClicked)='onRatingClicked($event)'></app-ai-star></td>
    </tr>

{{product.productName}
{{product.productCode}小写}
{{product.releaseDate}
{{product.price}货币：'USD'：真：'1.2-2'}

问题是您想订阅

getProducts（）

调用

ngOnInit() {
    this.subscription = this._productListService.getProducts() // subscription created here
      .subscribe(
        products => this.products = products, // value applied to products here
        error => this.errorMessage = <any>error);
  }

ngOnInit（）{
this.subscription=this.\u productListService.getProducts（）//在此处创建的订阅
.订阅(
products=>this.products=products，//此处应用于产品的值
error=>this.errorMessage=error）；
}

此.products的

值在
subscribe（）
中分配。您可以忽略返回的订阅对象，如下面的代码片段所示

ngOnInit() {
    this._productListService.getProducts() 
      .subscribe(
        products => this.products = products,
        error => this.errorMessage = <any>error);
  }

ngOnInit（）{
这是.\u productListService.getProducts（）
.订阅(
products=>this.products=products，
error=>this.errorMessage=error）；
}