Angular 4 get方法无法获取数据

Question

我是角4的新手。我试图使用Observables实现路由。我为url指定的用于从http.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";
}

我有一个将在服务中使用的products.json文件（数据必须来自此文件） 所有3个文件（products.json，productListComponent.ts＆amp; productService.ts）都在同一个文件夹中。

但仍然是Angular显示，找不到错误404文件（对于products.json）。 GET调用不起作用，应用程序的其余部分工作正常

我已经尝试相应地修改我的文件路径，但它仍然不适合我。另外，我在assets-cli.json下的assets数组中给出了products.json文件的路径，但仍无效。

请同样建议......谢谢！

Answer 1

我的应用程序也是一个购物车应用程序，以下是我的服务，以获取所有产品和我的代码可能与您的不同。

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, 
  }
}

下面显示此代码正在运行..