Как исправить функцию переключения списка кнопок в цикле * ngFor с индексом?

Question

У меня проблема с моим кодом.Я зацикливал массивы с помощью *ngFor и отслеживал их по индексу, чтобы можно было переключать кнопки.Так что переключение работает хорошо.Проблема теперь в том, что когда переключатель имеет значение true, он собирает выбранные данные, а когда он имеет значение false, он удаляет данные.Но когда вы выбираете снова, удаленные появляются снова.поэтому вместо того, чтобы показывать 2, он показывает 3. Ниже мой код, любая помощь будет оценена.
Моя ссылка также доступна: https://gist.github.com/sharbel93/cc552ac05ec2b0b6022c7a1514c7af51

Код TS

filteredSelection: any ;
toggleLifestyle: any = [];
toggleMeals: any = [];
selectedButton: any = [];

   // clicked function for lifestyle array
    getInputValueLifestyle(index, title) {
    this.toggleLifestyle[index]  = !this.toggleLifestyle[index];
    if(this.toggleLifestyle[index]){
      let arr = [];
      arr.push(title);
      for(var i = 0; i < arr.length; i++){
        this.selectedButton.push(arr[i]);
        this.filteredSelection = this.selectedButton.filter((item, index) => {
          return this.selectedButton.indexOf(item) >= index;
        });
      }
    } else if( !this.toggleLifestyle[index]) {
      this.filteredSelection.filter(item => item !== title);
    }
  }

  // clicked function for meals array
    getInputValueMeals(index, title) {
    this.toggleMeals[index]  = !this.toggleMeals[index];
    if(this.toggleMeals[index]){
      let arr = [];
      arr.push(title);
      for(let i = 0; i < arr.length; i++) {
        this.selectedButton.push(arr[i]);
        this.filteredSelection = this.selectedButton.filter((item, index) => {
          return this.selectedButton.indexOf(item) >= index;
        });
      }
    } else if(!this.toggleMeals[index]){
      this.filteredSelection = this.filteredSelection.filter(item => item !== title);
    } else {
      return this.filteredSelection;
    }
  }

    tracked(item, index){
    return index;
  }

HTML-код

    <ion-grid>
  <ion-row>
    <ion-col>
      <h4>Meals</h4>
       <span  >
        <input *ngFor="let ms of _mealtype; let i =index;trackBy: tracked"  type="button"  [style.background-color]="!toggleMeals[i] ? '#ffffff' : '#2ca9ad'"  [style.color]="!toggleMeals[i] ? '#2ca9ad' : '#ffffff'" (click)="getInputValueMeals(i, ms)"  value="{{ ms }}" >
      </span>
    </ion-col>
  </ion-row>
    <ion-row>
      <ion-col >
        <h4>Lifestyle</h4>
        <span >
        <input *ngFor="let ls of _lifestyles; let i =index;trackBy: tracked"  type="button" [style.background-color]="!toggleLifestyle[i] ? '#ffffff' : '#2ca9ad'"  [style.color]="!toggleLifestyle[i] ? '#2ca9ad' : '#ffffff'" (click)="getInputValueLifestyle(i, ls)" value="{{ ls }}">
        </span>
      </ion-col>
    </ion-row>
     <ion-row>
      <ion-col>
        <p>Results : </p>
        {{filteredSelection}}
      </ion-col>
    </ion-row>
        <ion-grid>