我有一个类(class)列表,这些类(class)通过使用 filtercourses 管道的可过滤 *ngFor 显示。我在顶部有 5 个按钮,可以触发过滤器来过滤类(class),1 个用于所有类(class),4 个用于特定类(class)类别。类(class)数据有一个属性,表示它是否已完成。我添加了一个复选框来过滤已完成的类(class)。
问题 1:这在初始检查中工作正常,但当我取消选中它时,它不会将列表返回到未过滤的类(class)。
问题 2:每次单击带有其他过滤器的按钮时,都需要取消选中该复选框。 (我希望这可以使用模板引用从模板本身进行更改)
管道
@Pipe({
name: 'filtercourses'
})
export class FiltercoursesPipe implements PipeTransform {
transform(items: any[], courseCategory: string): any {
if(courseCategory === 'all'){ return items }
else if (courseCategory === 'completed') {
console.log(courseCategory)
return items.filter(item => {
return item.completed === true;
});
} else
return items.filter(item =>{
return item.courseCategory === courseCategory;
}); return null;
}
}
模板
<div fxLayout="row" fxLayoutAlign="center center">
<div class="column is-10 grid-center mblg">
<div class="row" style="margin-top:10px;margin-bottom: 10px;">
<button class="button is-small is-success mrmd" (click)="filterBy='all'">All</button>
<button class="button is-small is-info mrmd" (click)="filterBy='Mandatory & Compliance'">Mandatory &
Compliance</button>
<button class="button is-small is-info mrmd" (click)="filterBy='Leadership & Management'">Leadership
& Management</button>
<button class="button is-small is-info mrmd" (click)="filterBy='Personal Effectiveness'">Personal
Effectiveness</button>
<button class="button is-small is-info mrmd" (click)="filterBy='Business Skills'">Business
Skills</button>
</div>
<div class="field">
<input id="switchColorSuccess" type="checkbox" name="switchColorSuccess" class="switch is-success"
checked="checked" (change)="filterBy='completed'">
<label for="switchColorSuccess">Completed</label>
</div>
</div>
</div>
<div style="margin: 0 auto;">
<ul fxLayout="column" fxLayoutAlign="center center">
<li *ngFor="let course of courses | filtercourses:filterBy">
<h3>{{course.courseName}}</h3>
<h4>{{course.courseCategory}}</h4>
<h5 *ngIf="course.completed" style="color: green">COURSE COMPLETED</h5>
<img src="{{course.courseImg}}" class="img" width="200"/>
</li>
</ul>
</div>
谢谢
我创建了这个Stackblitz
最佳答案
对于第一期,您可以引入一种在“全部”和“已完成”之间交替的切换方法
.html
<div class="field">
<input #switchColorSuccess type="checkbox" name="switchColorSuccess"
class="switch is-success"
(change)="toggle()">
<label for="switchColorSuccess">Completed</label>
</div>
.ts(您需要输入的引用才能使其工作,如下所述)
toggle() {
if (this.switchColorSuccess.nativeElement.checked) {
this.filterBy = "completed";
} else {
this.filterBy = "all";
}
}
对于第二个问题,您可以使用@ViewChild
通过id获取输入的引用。现在您可以在每次调用时将其设置为 false。例如:
.html
<!-- button -->
<button class="button is-small is-success mrmd" (click)="invokeByFilter('all')">All</button>
<!-- checkbox -->
<div class="field">
<input #switchColorSuccess type="checkbox" name="switchColorSuccess"
class="switch is-success"
(change)="toggle()">
<label for="switchColorSuccess">Completed</label>
</div>
.ts
@ViewChild("switchColorSuccess", { static: false }) switchColorSuccess: ElementRef;
invokeByFilter(input:string) {
this.switchColorSuccess.nativeElement.checked = false;
this.filterBy = input;
}
Here是工作的 stackblitz 演示,它是从您的版本中 fork 出来的。
关于 Angular 管道 - 当选择其他选项管道过滤器时重置复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58902974/