角度-结合使用两个输入文本框进行搜索

Question

我在页面上有一个用户记录列表，我希望最终用户可以通过名称和电子邮件进行搜索。当前，这是页面上的2个单独的输入文本框。

目前，这些搜索框允许用户按名称和电子邮件分别过滤用户记录。但是，用户希望按名称过滤，然后按电子邮件地址过滤，反之亦然。实际上，最终用户希望能够结合使用这些搜索框。

鉴于目前的状况，如何实现？

在我的HTML中，这些输入文本框写为：

<div class="col-lg-3">
    <input class="form-control" type="text" placeholder="Search by name" (input)="searchUsers('name', $event)">
</div>
<div class="col-lg-3">
    <input class="form-control" type="text" placeholder="Search by email" (input)="searchUsers('email', $event)">
</div>

在相应的类中，searchUsers定义为：

searchUsers(field: string, event: any){
    let search = event.target.value || '';
    search = search.replace(/^\s*/, '').replace(/\s*$/, '');
    clearTimeout(this.timeout);
    this.timeout = setTimeout(()=>{
        this.users.page = 1;
        this.users.search = this.users.search || {};        
        if(search){
            this.users.search[field] = {value: search};
            this.loadUsers();
        } else {
            delete this.users.search[field];
            this.loadUsers();
        }
    }, 1500);
}

各个DOA类中的

loadUsers方法是：

loadUsers(results: IPageResults<Users, {roles: UserRoles[]}>): Promise<IPageResultsOutcome<Users, {roles: UserRoles[]}>> {
    let app = this.app;
    let user = this.user;

    return new Promise((resolve, reject)=> {
        var roles: UserRoles[] = [];
        results.include('roles', function(users, resolve, reject){
            var ids: any[] = [];
            users.forEach(function(user){
                ids = ids.concat(user.roles);
            });
            ids = _.uniq(ids);
            app.models.user_roles.find({}).then(function(_roles){
                roles = _roles;
                resolve();
            }).catch(function(error){
                reject(error);
            });
        });
        results.apply(app.models.users, function(error, result) {
            if (error) {
                return reject(error);
            }
            result.extra = {
                roles
            }
            resolve(result);
        });
    });
}