Angular 4 - 获取产品和类别

Question

我正在一个有角度的网站上工作，其中有一个产品页面，在这个页面上有一些类别，在每个类别中都有产品，我能够获取类别和产品，但我不知道如何组合它们。

之类的，我要求分类，然后对于每个类别，我再次请求该类别产品的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.Category list, 2. products in that category 3. Accordion for showing products.

产品数组

{
"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"
    }
]

}