我已经看到了一些复选框的想法和策略，但是似乎无法使它在我的特定情况下起作用。
我是Angular的新手，但正在尝试构建一个健身Webapp。我想做的是使用复选框过滤显示在锻炼列表中的锻炼（锻炼列表显示为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
我要做的就是根据复选框的值找到过滤此列表的最佳方法。
复选框值通过WorkoutFilter组件获得。
我要过滤后要显示的锻炼列表是WorkoutList。
我目前正在为表单使用“应用”按钮。提交后，数据将成为带有字符串的对象，以容纳复选框的值。可以在WorkoutFilter组件中看到
如果有更好的方法可以做到这一点，甚至可以使用id's，我就会不知所措。
这是StackBlitz代码。我删除了一些组件，例如标题和sidenav，以使查看此问题更加容易。谢谢
我建议您在使用多个复选框时，使用角度集合中的SelectionModel。尽量不要将带有多个复选框控件的反应式表单用于此类过滤器，SelectionModel使其变得如此简单。
这是堆叠闪电战，希望对您有所帮助。
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);
}
}
希望能有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句