未处理的承诺拒绝：无法在 Angular 2 中加载答案

【问题标题】：Unhandled promise rejection: Failed to load in Angular 2未处理的承诺拒绝：无法在 Angular 2 中加载
【发布时间】：2018-08-15 20:15:49
【问题描述】：

我正在尝试在服务和组件的帮助下使用 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;    
}

我无法解决同样的问题。

谢谢

【问题讨论】：

标签： angular angular2-services

【解决方案1】：

您指定的是模板，而不是 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]
})

【讨论】：

【解决方案2】：

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

    }

你的服务返回了一个错误，你没有处理它

【讨论】：