如何過濾從 Angular 中的復選框值排序的列表？

Question

我已經看到了一些復選框的想法和策略，但似乎無法在我的特定情況下使用它。

我是 Angular 的新手，但我正在嘗試構建一個鍛煉網絡應用程序。 我想要做的是使用復選框來過濾哪些鍛煉出現在鍛煉列表中（鍛煉列表使用ngFor顯示）。

目前，我有一個WorkoutListComponent使用ngFor顯示列表（為簡單起見縮短）：

<div
  *ngFor="let workout of workouts"
  class="workout__list"
>

  <h2 class="workout__item--title">{{ workout.title }}</h2>
  <h3 class="workout__item--specs-heading">{{ workout.type }}</h3>
  <h3 class="workout__item--specs-heading">{{ workout.duration}}</h3>
  <h3 class="workout__item--specs-heading">{{ workout.phase }}</h3>
</div>

在我的ts ，我有以下內容：

...
workouts: any;

constructor(private workoutService: WorkoutService) {
  this.workoutService.getWorkouts().subscribe(res => {
    this.workouts = res;
    console.log("List Comp: ", this.workouts);
  });
}

workouts: any都來自我的workout.service 。 這是保存我的模擬鍛煉數據並運行函數以獲取和排序鍛煉的相同服務。 workout.service還使用BehaviorSubject制作了一個可觀察的對象，因此我可以在上面的WorkoutListComponent訂閱它。 鍛煉服務

selectedWorkouts: BehaviorSubject<any>;
  workouts: Workout[] = [
    new Workout( ... dummy text for workouts ... ),
    new Workout( ... dummy text for workouts ... ),
    new Workout( ... dummy text for workouts ... )
  ];
 constructor() {
    this.selectedWorkouts = new BehaviorSubject(this.workouts);
  }

getWorkouts() {
  return this.selectedWorkouts.asObservable();
}

filterWorkouts(phase: any[]) {
  console.log("SERVICE: ", phase);

    // I want the filter to take place here and put the filtered items back into the `this.workouts` array
 }
}

到目前為止，我嘗試過的代碼不起作用，在filterWorkouts()函數中，我接受了階段和專業，然后過濾this.workouts將其存儲到this.workouts 。 由於this.workouts顯示在列表項中，所以這個想法是可行的。 不幸的是，它並沒有像我想要的那樣工作。 此代碼位於附加的 stackblitz 中src/app/features/workouts-page/workoutservice/workout.service.ts的底部。

我目前接收復選框數據的方式是通過我的WorkoutFilter組件。 我正在獲取已檢查的屬性鍵值並將它們存儲在對象數組中，而不是僅使用在此 stackoverflow 中找到的true or false屬性。 WorkoutFilter 組件位於src/app/features/workouts-page/workouts/workouts-filter workouts src/app/features/workouts-page/workouts/workouts-filter workouts src/app/features/workouts-page/workouts/workouts-filter workouts src/app/features/workouts-page/workouts/workouts-filter的 stackblitz中。

我要做的就是找到根據復選框值過濾此列表的最佳方法。

• 復選框值來自 WorkoutFilter 組件。

• 過濾后我想顯示的鍛煉列表是鍛煉列表。

• 我目前正在使用表單的應用按鈕。 提交時，數據被制作成一個帶有字符串的對象，以保存復選框的值。 這可以在 WorkoutFilter 組件中看到

  如果有更好的方法來做到這一點，甚至可能使用 id's ，我都聽着。

這是 StackBlitz 代碼。 我刪除了一些組件，例如標題和 sidenav，以便更輕松地查看問題。 謝謝

Answer 1

我建議您在處理多個復選框時使用 angular 集合中的 SelectionModel。 盡量不要使用帶有多個復選框控件的反應式表單來控制這樣的過濾器，SelectionModel 使它變得如此簡單。

這是stackblitz，希望它有所幫助。

https://stackblitz.com/edit/github-4rezan-yqxkyv

代碼：

html：

<h4>Phase</h4>
<div class="checkbox">
    <span *ngFor="let phase of phaseOptions">
      <mat-checkbox
        color="warn"
        type="checkbox"
        (click)="phaseSelection.toggle(phase)"
      >
        {{ phase }}
      </mat-checkbox>
    </span>
</div>

<h4>Specialty</h4>
<div class="checkbox">
    <span *ngFor="let specialty of specialtyOptions">
      <mat-checkbox
        color="warn"
        type="checkbox"
        (click)="specialtySelection.toggle(specialty)"
      >
        {{ specialty }}
      </mat-checkbox>
    </span>
</div>
<button (click)="applyFilter()">Apply</button>

ts：

  specialtySelection = new SelectionModel<string>(true);
  phaseSelection = new SelectionModel<string>(true);

  applyFilter() {
    this.workoutService.filterWorkouts(this.phaseSelection.selected,
         this.specialtySelection.selected);
      }

服務：

filterWorkouts(phases: string[], specialties: string[]) {
  // do Filter with phases and specialties
  if (phases.length === 0 && specialties.length === 0) {
     this.selectedWorkouts.next(workouts);
  } else {
    const byPhase = (workout) => phases.some(phase => workout.phase === phase);
    const bySpecialty = (workout) => specialties.some(specialty => workout.specialty === specialty);
    const workouts = this.workouts.filter(workout => byPhase(workout) && bySpecialty(workout));
    this.selectedWorkouts.next(workouts);
  }
}

希望它有所幫助。