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

Question

我有一个类(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

Answer 1

对于 第一期您可以引入一种在“全部”和“已完成”之间交替的切换方法

.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是从你的 fork 出来的有效 stackblitz 演示。