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

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是从您的分叉中运行的stackblitz演示。

角管-选中其他选项管道过滤器后重置复选框

1 个答案: