2

我是 angular 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 和 productService.ts）都在同一个文件夹中。

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

我已经尝试相应地修改我的文件路径，但它仍然不适合我。此外，我在资产数组下的 angular-cli.json 中给出了 products.json 文件的路径，但仍然不起作用。

请就相同的建议...谢谢！

4

1 回答 1

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

下面显示此代码正在工作.. 在此处输入图像描述

于 2017-09-04T18:24:30.503 回答