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

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我希望过滤复选框选择。

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

在输入字段中，我可以使用[(ngModel)]获取值，但在复选框中，我无法执行此操作。请让我知道如何使用复选框选择。谢谢

Answer 1

是的，您可以像这样使用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/

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

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是您的打字稿文件的成员。 e.g：

private searchTerm: string = 'search';

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

Answer 3

组件代码：

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

HTML code：

<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

3 个答案: