Question

我试图在服务和组件的帮助下使用Http检索json数据。我已经使用了observable和subscribe模式，但是当我尝试访问组件中的数据时，我收到了以下错误：

Zone: <root> ; Task: Promise.then ; Value: Failed to load 

%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%7B%7Berror%7D%7D%3C/div%3E%
    0A%20%20%20%20%20%20%20%3Cul%20*ngFor=%22let%20product%20of%20products%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%7B%7Bproduct.name%7D%7D%3C/li%3E%

0A%0A%20%20%20%20%20%20%20%3C/ul%3E%0A%20%20%20%20 ; Zone: <root> ; Task: Promise.then ; Value: Failed to load %0A%20%20%20%20%20%20%20%20%3Cdiv%3E%7B%7Berror%7D%7D%3C/div%3E%0A%20%20%20%20%20%20%20%3Cul%20*ngFor=%22let%20product%20of%20products%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%3E%7B%7Bproduct.name%7D%7D%3C/li%3E%0A%0A%20%20%20%20%20%20%20%3C/ul%3E%0A%20%20%20%20

以下是我的服务：

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


import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class ProductService{
    private _url:string="";
    constructor(private _http: Http){}

    getProducts(){
        return this._http.get('product-data.json')
            .map(res => res.json())
            .catch(this._errorHandler);
    }

    _errorHandler(_error: Response){
        console.error( _error);
        return Observable.throw(_error || "Server Error");
    }

}

我的组件是：

import { Component, OnInit } from '@angular/core';
import { Product } from './product';
import { ProductService } from './product.service';


@Component({
    selector:'product-list',

    templateUrl:`
       <ul *ngFor="let product of products">
            <li>{{product.name}}</li>

       </ul>
    `,
    providers:[ProductService]
})
export class ProductListComponent implements OnInit{


    products : Product[];

    constructor(private _productService: ProductService){}
    ngOnInit(){
        this._productService.getProducts()
            .subscribe(products => this.products = products);

    }

}

产品型号是：

export class Product
{
    name: string;    
}

我无法解决同样问题。

由于

Answer 1

 constructor(private _productService: ProductService){}
    ngOnInit(){
        this._productService.getProducts()
            .subscribe(products => this.products = products,
                         err => {..do something here});

    }

您的服务返回了错误而您没有处理

Answer 2

您要指定模板，而不是templateUrl，所以不要这样做：

@Component({
    selector:'product-list',

    templateUrl:`
       <ul *ngFor="let product of products">
            <li>{{product.name}}</li>

       </ul>
    `,
    providers:[ProductService]
})

您应该这样做：

@Component({
    selector:'product-list',

    template:`
       <ul *ngFor="let product of products">
            <li>{{product.name}}</li>

       </ul>
    `,
    providers:[ProductService]
})

未处理的承诺拒绝：无法加载Angular 2

2 个答案: