在没有管道角度的情况下使用下拉列表过滤数据数组？

Question

I need to filter data by selected dropdown item. It currently searches me only once when I select filters and after that it is always empty. Example:

        <select class="select" (change)="onChangeMeal($event)">
            <option value="Izaberit">Choice meal</option>
            <option *ngFor="let meal of mealType" [value]="meal.num">
                {{ meal.name }}
            </option>
        </select>



onChangeMeal(evt) {

let mealTypeNumber = evt.target.value;
console.log(mealTypeNumber);

  switch (mealTypeNumber) {
  case '0':
    this.meals = this.meals.filter(meal => meal.trainerId == '0')
    console.log('0 meal' , this.meals)
    break;

  case '1':
    this.meals = this.meals.filter(meal => meal.trainerId == '1')
    console.log('1 meal' , this.meals)
    break;

  case '2':
    this.meals = this.meals.filter(meal => meal.trainerId == '2')
    break;

  case '3':
    this.meals = this.meals.filter(meal => meal.trainerId == '3')
    break;

  default:
    break;
}

// if(evt.target.value == '1') {
//   console.log('jes')
//   this.meals = this.meals.filter(meal => meal.trainerId == '1')  
// }
// if(evt.target.value == '2') {
//   console.log('jes 2')
//   this.meals = this.meals.filter(meal => meal.trainerId == '2')  
// }

}

He does it only once again. The next time I try to select a dropdown value it returns an empty array.

Answer 1

Don't filter the array directly, because you will lose all items in the array that do not meet the filter criteria.

Instead, hold the items in another variable and use that one to filter

allItems = [...this.meals];
// [...]
this.meals = allItems.filter(() => {});

Playground example

Answer 2

Because you're updating your meals data so that the other cases might not work as intended. You need to assign your meals data with another variable like

....subscribe(res) => {
  // here you need to assign in two different variables
  this.allMeals = res;
  this.meals = res;
}

Then in your cases instead of filtering from meals , you need to filter from this.allMeals and assign result to meals variable.

case '2':
    this.meals = this.allMeals.filter(meal => meal.trainerId == '2')
    break;

In this case your meals will have a filtered result from allMeals every time.