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

Question

我有一个课程列表，这些课程通过可过滤的* ng显示，用于使用filtercourses管道。我在顶部有5个按钮，它们触发过滤器以过滤课程，其中1个用于所有课程，而4个用于特定课程类别。课程数据具有一个表明已完成或未完成的属性。我添加了一个复选框，也可以过滤完成的课程。

问题1：这在初次检查时效果很好，但是当我取消选中它时，它不会将列表返回未过滤的课程。

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

我有一个课程列表，这些课程通过可过滤的* ng显示，用于使用filtercourses管道。我在顶部有5个按钮，它们触发过滤器以过滤课程，其中1个用于所有课程，而4个...

Answer 1

对于第一期