我已经创建了一个筛选器,并以Angular 排序管道,并按如下方式链接它.但是管子链条不起作用.如果我只使用一个管道,它可以工作,但如果我像下面这样使用两个管道,只有过滤器功能可以工作,排序管道不能工作.谁能告诉我我到底犯了什么错?

      <div class="grid-container">
        <div class="grid-item" *ngFor="let prod of (productsList.products | sort:sortProductSelected | filterOnPrice:priceRange )">
          <div class="card" style="width: 18rem;border: 0px;">
            <img src="{{prod.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{prod.brand}}</h5>
              <p class="card-text">${{prod.price}}</p>
              <p class="card-text">{{prod.description}}</p>
              <a target="_blank" class="btn btn-primary" (click)="viewProduct(prod.id)">View Product</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    

分拣管道

export class SortPipe implements PipeTransform {
  transform(value: any[], ...args: any): any[] {
    if(args){
      switch(args[0]){
        case 'Price low to hight': 
          value.sort((a,b)=>{
            if(a.price<b.price) return  -1;
            else if(a.price>b.price) return 1;
          return 0;
          console.log("value");

          })
          break;
        case 'Price High to Low' :
          value.sort((a,b)=>{
            if(a.price>b.price) return  -1;
            else if(a.price<b.price) return 1;
          return 0;
          })
          break;
        case 'Ratings':
          value.sort((a,b)=>{
            if(a.rating<b.rating) return  -1;
            else if(a.rating>b.rating) return 1;
          return 0;
          })
          break;
        case 'Discounts' :
          value.sort((a,b)=>{
            if(a.discountPercentage<b.discountPercentage) return  -1;
            else if(a.discountPercentage>b.discountPercentage) return 1;
          return 0;
          })
          break;
        default: return value;
      }  
    }

    return value;
  }

}

滤管

export class FilterOnPricePipe implements PipeTransform {
  transform(value: any[], ...args: any): any[] {
    let FliteredArray:any[] =[];

    FliteredArray = value.filter((a)=>{
           console.log(a.price);
           console.log(FliteredArray);
      return a.price<=args[0];

    })
    console.log(FliteredArray);
    return FliteredArray;
  }

}

推荐答案

最好先使用filterPipe,然后再执行sortPipe,当我这样做时,它运行得很好,因为我们正在删除不必要的值并对其进行排序,这将提高性能!

另外,我猜输入引用没有更改,所以您遇到了这个问题!

因为当我在sortPipe中更改第45行时,它开始工作正常(没有交换管道),所以我猜需要更新数组的引用以触发管道.

return [...value];

我认为您应该先执行筛选,然后再排序,因为这是有意义的,并且不需要更新引用!

下面是一个有效的示例!

TS

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { booTStrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { FilterOnPricePipe } from './filter.pipe';
import { SortPipe } from './sort.pipe';

@Component({
  selector: 'app-root',
  standalone: true,
  imporTS: [CommonModule, FilterOnPricePipe, SortPipe, FormsModule],
  template: `
  sortProductSelected
  <select [(ngModel)]="sortProductSelected">
        <option *ngFor="let state of states" [ngValue]="state.name">
          {{ state.name }}
        </option>
      </select><br/>
      <input type="number" [(ngModel)]="priceRange"/>
  <div class="grid-container">
     <div class="grid-item" *ngFor="let prod of (producTSList.producTS | filterOnPrice:priceRange | sort:sortProductSelected )">
       <div class="card" style="width: 18rem;border: 0px;">
         <img src="{{prod.thumbnail}}" class="card-img-top" alt="..."/>
         <div class="card-body">
           <h5 class="card-title">{{prod.brand}}</h5>
           <p class="card-text">$ {{prod.price}}</p>
           <p class="card-text">{{prod.description}}</p>
           <a target="_blank" class="btn btn-primary" (click)="viewProduct(prod.id)">View Product</a>
         </div>
       </div>
     </div>
   </div>  
   `,
})
export class App {
  states = [
    { name: 'Price low to hight' },
    { name: 'Price High to Low' },
    { name: 'Ratings' },
    { name: 'DiscounTS' },
  ];
  sortProductSelected = 'Price low to hight';
  priceRange = 15;
  name = 'Angular';
  producTSList = {
    producTS: [
      {
        thumbnail: 'https://placehold.co/600x400',
        brand: 'test',
        price: 1,
        rating: 1,
        discountPercentage: 1,
        description: 'test',
        id: 1,
      },
      {
        thumbnail: 'https://placehold.co/600x400',
        brand: 'test',
        price: 2,
        rating: 2,
        discountPercentage: 2,
        description: 'test',
        id: 2,
      },
      {
        thumbnail: 'https://placehold.co/600x400',
        brand: 'test',
        price: 3,
        rating: 3,
        discountPercentage: 3,
        description: 'test',
        id: 3,
      },
    ],
  };

  viewProduct(e: any) {}
}

booTStrapApplication(App);

stackblitz

Angular相关问答推荐

如何在HTMLTITLE属性中使用Angular 显示特殊字符?

以17角表示的自定义元素

如何在滑动滑块中获取当前项目的索引?

带迭代的Angular 内容投影

在Angular 应用中混合使用较少和较粗俗的文件

ANGLE DI useFactory将参数传递给工厂函数

从canActivate创建时,Angular material 对话框不接收MAT_DIALOG_DATA

ANGLING:ExpressionChangedAfterChecked在嵌套形式中由子项添加验证器

基于RxJS的Angular 服务数据缓存

我需要取消订阅路由的可观察事件吗

在父组件的子组件中使用 ng-template

可从 Angular2 中的

如何以像素为单位将属性绑定到 style.width?

URL 清理导致嵌入式 YouTube 视频的刷新

Angular 4.3拦截器不起作用

如何为 Angular 2 中的渲染元素绑定事件监听器?

Angular - 是否有 HostListener-Events 列表?

Angular 2:将外部js文件导入组件

包 '@angular/cli' 不是依赖项

Angular 4 - 获取输入值