Javascript 根据打印脚本的价格进行排序

因此，目前我正在开发一个电子商务网站，我正在研究如何根据最低价格到最高价格对产品进行分类。我现在遇到了麻烦，因为我不知道从哪里开始，我的知识还没有达到标准。 这是我现在的代码行：

<main role="main" data-aos="fade-right" data-aos-duration="1000">
<div class="jumbotron section">
  <div class="container">
    <div class="d-flex flex-row">
      <div class="col-2">
        <div><strong>Shop by Product</strong></div>
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" routerLink="/shop">View All</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/recently-added">New Arrival</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Necklaces">Necklaces</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Bracelets-Anklets">Bracelets and Anklets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Earrings">Earrings</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Rings">Rings</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/best-sellers">Bestsellers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Other">Others</a>
          </li>
        </ul>
      </div>
      <div class="col-10">
        <div class="d-flex justify-content-start flex-wrap" *ngIf="products$">
          <div class="card mx-2" *ngFor="let product of products$; let i = index" [routerLink]="['/product/', product._id]">
            <div class="img-hover-zoom"> <img src="{{product.imageUrl}}" class="img-fluid card-img-top" /></div>
            <div class="card-body">
              <div class="card-text">
                <a>
                  <span style="font-weight: bold;">{{ product.name }}</span>
                </a>
              </div>
              <div class="card-title">Php {{ product.price }}</div>
              <p *ngIf="product.stock_quantity == 0" style="color: red;font-size: 12pt;">Out of stock</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <select>
          <option selected value="undefined" disabled>
            Choose Category
          </option>
          <option value="l2h">Price: Low to High</option>
          <option value="h2l">Price: High to Low</option>
        </select>
      </div>
    </div>
  </div>
</div>
<a routerLink="/shop" id="back-to-top" class="back-to-top" style="display: inline;">
  <i class="fa fa-arrow-up pt-3 pl-2 ml-2"></i>
</a>

---

使用ngFor指令将products对象绑定到列表。获取产品对象的值后，可以按照升序或降序对该对象进行排序

this.products$.sort((a, b) => (a.price > b.price) ? 1 : -1)

或

this.products$.sort（（a，b）=>（a.price

在

.ts

文件下添加以下函数

sortProductByPrice(option){
   if(option.value =='l2h'){
     this.products$.sort((a, b) => Number(a.price) - Number(b.price));
   }else if(option.value =='h2l'){
     this.products$.sort((a, b) => Number(b.price) - Number(a.price));
   }
}

并更新视图

.html

文件以调用此函数

<select (change)="sortProductByPrice($event.target)" >
  <option selected value="undefined" disabled>Choose Category</option>
  <option value="l2h">Price: Low to High</option>
  <option value="h2l">Price: High to Low</option>
</select>

选择类别
价格：从低到高
价格：从高到低

您好，您能详细说明一下吗？数据在哪里？

让products of products$

看起来很奇怪。应该是

let products of products$| async

或

let products of products

。请说明如何填写

产品$

，您应该在此处进行排序。请编辑您的问题以添加详细信息您所说的数据是什么意思@Tiagothe fiddle仍然只包含HTML，而不是typescript部分…所以我只需要在排序部分的函数中插入它？输出结果如何？在我单击某个选项时没有排序。如果您可以创建stackblitz并在此处共享链接@sureshcan您可以尝试更新的代码吗？最后，它现在可以工作了！谢谢你@suresh。如果可以的话，如果我给它添加另一个函数，比如按字母顺序排序，我会怎么做呢？

sortProductByPrice(option){
   if(option.value =='l2h'){
     this.products$.sort((a, b) => Number(a.price) - Number(b.price));
   }else if(option.value =='h2l'){
     this.products$.sort((a, b) => Number(b.price) - Number(a.price));
   }
}

<select (change)="sortProductByPrice($event.target)" >
  <option selected value="undefined" disabled>Choose Category</option>
  <option value="l2h">Price: Low to High</option>
  <option value="h2l">Price: High to Low</option>
</select>