按角度 5 中的复选框过滤

Question

我能够使用管道在输入字段上实现过滤器。但我无法使用复选框过滤器这样做。

以下是我的输入过滤器代码。

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());
        });
    }
}

用户组件.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，我想过滤复选框选择。

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

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

Answer 1

组件代码：

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"))
    }
}

Answer 2

首先，当涉及到状态切换时，您不应该使用复选框。在这种情况下，请始终使用单选按钮。

将此代码放入您的 HTML 模板中

<label>
  <input type="radio" name="role-group" id="admin" value="admin" [checked]="searchTerm==='admin'" [(ngModel)]="searchTerm">Admin
</label>
<label>
  <input type="radio" name="role-group" id="student" value="student" [checked]="searchTerm==='student'" [(ngModel)]="searchTerm">Student
</label>
<label>
  <input type="radio" name="role-group" id="staff" value="staff" [checked]="searchTerm==='staff'" [(ngModel)]="searchTerm">Staff
</label>

并确保 searchTerm 是您的打字稿文件的成员。例如：

private searchTerm: string = 'search';

应该可以。如果您现在单击其中一个单选按钮 searchTerm 已设置，Angular 将使用您的管道进行过滤。此外，如果您手动输入“admin”、“student”或“staff”，则会激活相应的单选按钮。

Answer 3

是的，你可以像这样使用 ngModel：

<input type="checkbox" name="admin" id="admin" [(ngModel)]='isAdmin'>
<input type="checkbox" name="student" id="student" [(ngModel)]='isStudent'>

我在这里有一篇关于过滤的博文：https://blogs.msmvps.com/deborahk/filtering-in-angular/

它展示了如何使用代码而不是管道进行过滤，以便您可以更轻松地过滤复选框值。