javascript - 如何在 Angular 2 中同時使用範圍滑桿和多個複選框來過濾結果？

我正在嘗試篩選給定陣列「db」的結果，有三個過濾條件：價格、時長和類別。

我嘗試使用 filter() 方法來篩選結果。

這是我嘗試過的程式碼連結：https://stackblitz.com/edit/multiple-filters?file=app%2Fapp.component.ts

元件.html

<div class="filters">
  <div id="price">
  <h3>Price: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
  <p-slider [(ngModel)]="rangeValues" (click)="handleChange()" [min]="0" 
  [max]="2000" [style]="{'width':'14em'}" [range]="true"></p-slider>
</div>
<hr>
<div id="duration">
    <h3>Duration</h3>
    <li><input type="checkbox" (click)="checkFilter('2 days')"> 2 Days</li>
    <li><input type="checkbox" (click)="checkFilter('6 days')">6 Days</li>
</div>
<hr>
<div id="Theme">
    <h3>Theme</h3>
    <li><input type="checkbox" id="Wild Life" (click)="filterTheme('Wild Life')">Wild Life</li>
    <li><input type="checkbox" id="Romance" (click)="filterTheme('Romance')">Romance</li>
    <li><input type="checkbox" id="Food & Drink" (click)="filterTheme('Food & Drink')">Food & Drink</li>
    <li><input type="checkbox" id="Adventure" (click)="filterTheme('Adventure')">Adventure</li>
 </div>
 <hr>
 </div>

 <div class="results">
    <h3>Results</h3>

    <div *ngFor="let p of package">
    <p>{{p.product_name}}</p>
    </div>
 </div>

元件.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 db=[
{
  "id":"1",
  "product_name":"6 Days at Karnataka",
  "price":324,
  "duration":"6 days",
  "category":["Romance"]
},
{
  "id":"5",
  "product_name":"2 Days at Thailand",
  "price":234,
  "duration":"2 days",
  "category":["Romance","Wild Life"]
},
{
  "id":"8",
  "product_name":"2 Days at Delhi",
  "price":1400,
  "duration":"2 days",
  "category": ["Romance","Food & Drink","Adventure"],
}
];
rangeValues: number[] = [0,2000];
package:any;
filterData=[];


ngOnInit(){
  this.packageList();
}

packageList(){
 for(let i = 0; i < this.db.length; i++){
  this.filterData.push(this.db[i]);
  this.package =this.filterData;
 }    
}

handleChange() {
        for(let i = 0; i < this.filterData.length; i++){             
          this.package= this.filterData.filter(item => item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
   }
}

checkFilter(id){ 
    if(id.checked==true){
      for(let i = 0; i < this.filterData.length; i++){
         this.filterData= this.filterData.filter(item => item.duration !== id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
          this.package=this.filterData;
      }
    }
    else {
      for(let i = 0; i < this.filterData.length; i++){
          this.filterData= this.filterData.filter(item => item.duration == id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
          this.package=this.filterData;
      }
    }
 }


filterTheme(id){
    let b=(<HTMLInputElement>document.getElementById(id));
    if(b.checked==true){
      for(let i = 0; i < this.filterData.length; i++){
        for(let j=0;j< this.filterData[i].category.length; j++){
          if(this.filterData[i].category[j]==id &&  this.filterData[i].price >=this.rangeValues[0] &&  this.filterData[i].price <=this.rangeValues[1]){

            this.package= this.filterData.filter(item => item.category[j]==id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
          }
        }
      }
    }else {
      for(let i = 0; i < this.filterData.length; i++){
        for(let j=0;j<this.filterData[i].category.length; j++){
          if(this.filterData[i].category[j]!==id && this.filterData[i].price >=this.rangeValues[0] && this.filterData[i].price <=this.rangeValues[1]){
            this.package = this.filterData.filter(item => item.category[j]!== id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);

          }
        }
      }
    }

 }

}

我想要達成的目標：

價格篩選： 我使用了範圍滑桿來篩選結果，它能正確篩選價格，但它也應該根據選定的時間和類別篩選結果。
時間篩選： 使用勾選框來過濾結果，這應該會過濾給定價格和所選類別的結果。
類別篩選： 一個 product_name 可以有一個或多個類別，並且它應該篩選選定類別和所選價格的結果。

答案＃1

嗯，你正在通過循環檢查它來使事情變得複雜，你可以有一個函數來幫你完成這項工作。

步驟1： 拿三個模型

rangeValues: number[] = [0, 2000];
  durations: any = [];
  themes: any = [];

步驟2：在這些模型中分配使用者的值

  handleChange() {
    this.ApplyFilters();
  }

  checkFilter(id) {
    if (this.durations.some(a => a === id)) {
      this.durations = this.durations.filter(a => a !== id)
    } else {
      this.durations.push(id)
    }
    this.ApplyFilters();
  }


  filterTheme(id) {
    if (this.themes.some(a => a === id)) {
      this.themes = this.themes.filter(a => a !== id)
    } else {
      this.themes.push(id)
    }
    this.ApplyFilters();
  }

步驟3：建立一個共用篩選器

  ApplyFilters() {
    this.package = this.filterData.filter(item => {
      return (item.price >= this.rangeValues[0] && item.price <= this.rangeValues[1]) && (this.durations.some(b => b === item.duration) || this.durations.length === 0) && (item.category.every(c => this.themes.some(d => d === c)) || this.themes.length === 0)
    });
  }

然後你完成了

這裡是演示