сортировать данные, полученные из get api в angular 8

Question

Я получаю список продуктов от API. Я хочу отсортировать продукт в соответствии с нашими потребностями, как показано ниже:

мой компонент. html

<select id="sort-by" (change)="sort($event)">
  <option value="" selected disabled hidden>Sort By</option>
  <option value="Name">Product list A-Z</option>
  <option value="Name1">Product list Z-A</option>
  <option value="Date">Date</option>
  <option value="Low">Show Low to High Price</option>
  <option value="High">Show High to Low Price</option>
</select>

Я могу сортировать продукты по продукту цена от низкой к высокой и от высокой к низкой, но я не могу отсортировать данные по AZ, ZA, дате

my component.ts file

  ngOnInit() {
    this.productService.getProductList().subscribe((res: any) => {
      console.log(res.payload);
      this.ProdData = res.payload;
    });
  }

  sort(event: any) {
    switch (event.target.value) {
      case "Low": {
        this.ProdData = this.ProdData.sort(
          (low, high) => low.Price - high.Price
        );
        break;
      }

      case "High": {
        this.ProdData = this.ProdData.sort(
          (low, high) => high.Price - low.Price
        );
        break;
      }

      case "Name": {
        this.ProdData.sort(function (a, b) {
          if (a.Name < b.Name) {
            return 1;
          }
          if (a.Name > b.Name) {
            return -1;
          }
          console.log(a.Name);
        });
      }
      case "Name1": {
        this.ProdData.reverse();
      }
      case "Date": {
        this.ProdData.sort(function (c, d) {
          return c.UpdatedAt - d.UpdatedAt;
        });
      }

      default: {
        this.ProdData = this.ProdData.sort(
          (low, high) => low.Price - high.Price
        );
        break;
      }
    }
    return this.ProdData;
  }

my Ответ API похож на

     Id: 2
     Name: "cvcb1"
     Price: "20"
     Description: "bgfhjgj"
     CamparePrice: "78"
     SkuNumber: "568669"
     Quantity: "1"
     UpdatedAt: "2020-04-23T11:59:47.000Z"

Answer 1

Рабочая демонстрация в этой StackBlitz Link

export interface pData{
  Id: number;
  Name: string;
  Price: String;
  Description: string;
  CamparePrice: string;
  SkuNumber: string;
  Quantity: string;
  UpdatedAt: string;
}

порядке сортировки, как показано ниже ..

sort(order){
    switch (order.target.value) {
      case "Low" : {
          this.productList = this.productList.sort(
              (low: pData, high: pData) => +low.Price - +high.Price
            );
        break;          
      }
      case "High": {
        this.productList = this.productList.sort(
          (low, high) => +high.Price - +low.Price
        );
       break;
     }
      case "Name1": {
        this.productList = this.productList.sort(
          (low, high) => high.Name.toLowerCase().trim() >  low.Name.trim().toLowerCase() ? 1 : -1
        );
        break;
      }
      case "Name": {
        this.productList = this.productList.sort(
          (low, high) => high.Name.toLowerCase().trim() <  low.Name.trim().toLowerCase() ? 1 : -1
        );
        break;
      }

      case "Date" : {
        this.productList = this.productList.sort((low, high) => high.UpdatedAt.trim().toLowerCase() < low.UpdatedAt.trim().toLowerCase() ? 1 : -1)
      }
    }
}

TemplateFile is ..

<code><select id="sort-by" (change)="sort($event)">
      <option value="" selected disabled hidden>Sort By</option>
      <option value="Name">Product list A-Z</option>
      <option value="Name1">Product list Z-A</option>
      <option value="Date">Date</option>
      <option value="Low">Show Low to High Price</option>
      <option value="High">Show High to Low Price</option>
</select>
<hr>
<pre>
 {{productList |json}}

Answer 2

Используйте loda sh для сортировки имени

import {orderBy} from 'lodash';
case "Name": {
this.ProdData = orderBy(this.ProdData, ['Name'],['asc']);
}
case "Name1": {
this.ProdData = orderBy(this.ProdData, ['Name'],['desc']);
}