按角度5中的复选框过滤 [英] Filter by checkbox in angular 5

问题描述

我能够使用管道在输入字段上实现过滤器.但是我无法使用复选框过滤器来做到这一点.

I am able to implement the filter on input field with the pipe. But I am not able to do so with checkbox filter.

下面是我的输入过滤器代码.

Below is my code for input filter.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(users: any, searchTerm: any): any {
        // check if search term is undefined
        if (searchTerm === undefined) {
            return users;
        }
        // return updated users array
        return users.filter(function(user) {
            return user.name.toLowerCase().includes(searchTerm.toLowerCase());
        });
    }
}

UserComponent.html

UserComponent.html

<input type="text" [(ngModel)]="searchTerm">

<table>
    <tr *ngFor="let user of users | filter: searchTerm">
        <td>{{user.name}}</td>
        <td>{{user.type}}</td>
    </tr>
</table>

现在是type的我要根据复选框选择进行过滤.

Now for type I want to filter on checkbox select.

<tr>
    <td *ngFor="let role of roles">
        <label>{{role.type}}</label>
        <input type="checkbox">
    </td>
</tr>

在输入字段中，我可以使用[(ngModel)]获取值，但是在复选框中，我无法这样做. 请让我知道如何使用复选框选择. 谢谢

In input field i can get the value using [(ngModel)] but in checkbox, I am not able to do so. Please let me know how could I achieve using checkbox select. Thank you

推荐答案

组件代码:

public roleList = {studentRole:false,adminRole:false,staffRole:false};

HTML代码:

<tr>
    <td *ngFor="let user of userList | roleFilter:roleList">
        {{user.name}} - {{user.roleType}}
    </td>
</tr>

<label>Student</label>
<input [(ngModel)] = "roleList.studentRole" type="checkbox">

<label>Admin</label>
<input [(ngModel)] = "roleList.adminRole" type="checkbox">

<label>Staff</label>
<input [(ngModel)] = "roleList.staffRole" type="checkbox">

管道代码:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'roleFilter'
})
export class RoleFilter implements PipeTransform {

    transform(userList: any,roleList:any): any {
        if(!roleList.studentRole && !roleList.adminRole && !roleList.staffRole){
            return userList;
        }

        return userList.filter(user => 
                                (roleList.studentRole && user.roleType == "student") 
                                || (roleList.adminRole && user.roleType == "admin")
                                || (roleList.staffRole && user.roleType == "staff"))
    }
}

这篇关于按角度5中的复选框过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！