Angular 4 - выбор товаров и категорий - PullRequest
0 голосов
/ 10 мая 2018

Я работаю над угловым веб-сайтом, на котором есть страница продукта, и на этой странице есть несколько категорий, и в каждой категории есть продукты, я могу выбирать категории и продукты, но я не знаю, как их объединить.

например, я запрашиваю категории, а затем для каждой категории я снова запрашиваю API для продуктов в этой категории.

Я могу звучать новичком (что я на самом деле), но любая помощь приветствуется.

    import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ProductsService } from '../services/products.service';

import { Products } from '../models/Products';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  productList: Products[];
  productArray:any;

  constructor(private http:HttpClient, private products:ProductsService) {

   }

  ngOnInit():void {
    this.products.getProducts().subscribe(products=>{
      this.productList = products;
      this.productArray = this.productList['results'];
      console.log(this.productList['results']);
    });

   }

}

My product service 

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';
    import { Products } from '../models/Products';


@Injectable()
export class ProductsService {
  productURL: string = 'http://itgenesys.com/mdevices/webservices/api.php?rquest=getproducts&catid=8';

  constructor(private http:HttpClient) { }

  getProducts(): Observable<Products[]>{
   return this.http.get<Products[]>(this.productURL)
  }

}

Вот изображение страницы 1. Список категорий, 2. товары в этой категории 3. Аккордеон для показа товаров.

Массив продуктов

{
"status": "1",
"msg": "product list",
"results": [
    {
        "id": "1",
        "title": "MAXLITE  MACINTOSH FIBER OPTIC BLADES",
        "description": "With over 25 Years of experience and a specialized manufacturing setup, Medical Devices laryngoscopes are proven to be exceptionally reliable and durable. These are made from Superior quality materials and are subjected to strict quality control measures. Our Laryngoscope systems are not only designed to be more efficient, but also to be the most economical.\r\n\r\nMaxlite Laryngoscopes are built with an integrated Fiber Optic bundle with no cavities to trap dirt or body fluids, thus allowing the blade to be easily cleaned and decontaminated. This contributes largely to the elimination of cross infection.",
        "parentcatname": null,
        "parentcatid": "8",
        "subcatname": null,
        "subcatid": "1",
        "date": "2018-03-29 05:36:55",
        "mainphoto": "Tulips.jpg"
    },
    {
        "id": "2",
        "title": "Iphone 6",
        "description": "With over 25 Years of experience and a specialized manufacturing setup, Medical Devices laryngoscopes are proven to be exceptionally reliable and durable. These are made from Superior quality materials and are subjected to strict quality control measures. Our Laryngoscope systems are not only designed to be more efficient, but also to be the most economical",
        "parentcatname": null,
        "parentcatid": "4",
        "subcatname": null,
        "subcatid": "8",
        "date": "2018-03-29 06:50:19",
        "mainphoto": "Hydrangeas.jpg"
    }
]

}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...