订阅'不可分配到类型

问题描述：

我遇到问题获取服务以在页面上显示结果。错误是订阅方法返回一个订阅类型，并且我试图将其转换为产品数组。产品在json文件中。订阅'不可分配到类型

设置：我想通过教程学习Angular 2。本教程的日期和我使用的最新版本的角（ng -v = @ angular/cli：1.4.2）。我用ng和ng生成安装程序。

产品list.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); 
    }

产品list.service.ts

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

产品list.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>

答

问题是，您想让您的订阅=拨打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); 
    }

答

this.products的值指定为subscribe()。您可以忽略返回的订阅对象，如下面的代码片段所示。

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

订阅'不可分配到类型

相关推荐