Angular 管道 - 选择其他选项管道过滤器时重置复选框

Question

我有一个课程列表，使用 filtercourses 管道通过可过滤的 *ngFor 显示。我在顶部有 5 个按钮触发过滤器来过滤课程，1 个用于所有课程，4 个用于特定课程类别。课程数据有一个属性表示它是否已完成。我添加了一个复选框来过滤已完成的课程。

问题 1：这在初始检查时工作正常，但当我取消选中它时，它不会 return 未过滤课程的列表。

问题 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

Answer 1

对于第一期你可以引入一种在'all'和'completed'

之间交替的切换方法

.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 演示，它是从你的演示中分叉出来的。

Angular 管道 - 选择其他选项管道过滤器时重置复选框

Angular Pipe - reset checkbox when other options pipe filters selected

checkbox

typescript

angular-pipe

angular