角4 get方法無法獲取數據

我是一個新手的角度4。我試圖通過使用Observables來實現路由。我爲url指定的鏈接用於從http.get請求獲取數據does not似乎工作並返回一個錯誤。角4 get方法無法獲取數據

以下是表示用於我的服務「productService.ts」的代碼：

import { Injectable } from '@angular/core'; 
import { IProducts } from './productsInterface'; 
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/do'; 


@Injectable() 
export class ProductService { 
    private urlOfService = './products.json'; 

    constructor(private http: HttpClient){} 

    getProducts():Observable<IProducts[]>{ 
     return this.http.get<IProducts[]>(this.urlOfService) 
         .do(data=>console.log('The data recieved' + JSON.stringify(data))) 
         .catch(this.handleError); 
    } 
    private handleError(err:HttpErrorResponse){ 
     console.log(err.message); 
     return Observable.throw(err.message); 
    } 

}

，並且其中所述服務是要使用的，如下所示的成分：「ProductListComponent.ts」

import { Component, OnInit, Injectable } from '@angular/core'; 
import { FormsModule }from '@angular/forms'; 
import {IProducts} from './productsInterface'; 
import {ProductService} from './productService'; 

@Injectable() 

@Component({ 
    selector: 'app-product-list', 
    templateUrl: './product-list.component.html', 
    styleUrls: ['./product-list.component.css'] 
}) 

export class ProductListComponent implements OnInit { 
    errorMessage: any; 
    products: any; 




    constructor(private _useProductService : ProductService) { console.log(_useProductService); } 

    ngOnInit() { 
    console.log('Inside ngOnInit'); 
    this._useProductService.getProducts().subscribe(
     products=>{this.products= products; console.log(products)},error=>this.errorMessage =<any>error 
    ); 
    } 

    pageTitle:string = "Official Merchandise"; 
    imageHeight:number= 40; 
    imageWidth:number = 40; 

    showImage: boolean = false; 

    filterList :string = "Cart"; 
}

我有一個要在服務中使用的product.json文件（數據必須來自此文件）所有3個文件（products.json，productListComponent.ts & productService.ts）都在sam e文件夾。

但仍然角顯示，錯誤404找不到文件（用於products.json）。 GET調用犯規作品，

我已經試過相應地修改我的文件路徑，但仍是其工作不適合我的應用程序的其餘部分工作得很好。此外，我已經在assets-array下的angular-cli.json中給出了products.json文件的路徑，但它仍然不起作用。

請告知在同一...謝謝！

來源

2017-09-04 Angadbir Singh Sandhu

當你有資產文件夾中的文件，它應該工作，所以...'私人urlOfService =資產/ products.json';'不起作用？ – Alex

我的應用程序也是一個購物車應用程序，以下是我的服務讓所有的產品和我的代碼從你的也許不同。

getProducts() { 
    return this._http.get('http://localhost:3000/product').map(response => { 
    const data = response.json().obj; // from server route - the obj your are returning. 
    console.log(data) /* see if you get any data here..*/ 
    let objs = this.returnProducts(data); 
    this.products = objs; 
    return objs; 
    }) 
    .catch(error => Observable.throw(error.json())); 
}

如果你沒有得到在控制檯中的任何數據，你就越有可能需要調試服務器代碼。我也重新考慮它，因爲我的應用程序正在增長。

returnProducts(data: any[]){ 
    let objs: any[] = [];  
    for (let i = 0; i < data.length; i++) { 
    let product = new Product(data[i].title, data[i].imageUrl, 
     data[i].description, data[i].filter, data[i].price, 
     data[i].brand, data[i].color, 
    } 
}

下面顯示了這個代碼工作..

來源

2017-09-04 18:24:30

角4 get方法無法獲取數據

回答

相關問題