Angular 如何按多个字段进行筛选,不包括按公共属性向数组中添加重复匹配项
有一个用户数组,有一个过滤表单,其中需要几个字段和两个字段。如何确保先前在其他字段中已经重合的对象不会落入结果数组中 如何在输入每个字符时发出服务器请求根据字母的最小匹配进行过滤。我按输入字段中的完整短语进行过滤 搜索.组件Angular 如何按多个字段进行筛选,不包括按公共属性向数组中添加重复匹配项,angular,rxjs,filtering,Angular,Rxjs,Filtering,有一个用户数组,有一个过滤表单,其中需要几个字段和两个字段。如何确保先前在其他字段中已经重合的对象不会落入结果数组中 如何在输入每个字符时发出服务器请求根据字母的最小匹配进行过滤。我按输入字段中的完整短语进行过滤 搜索.组件 searchUser() {//when we fileds already filled this.users = [];//clear users array const user: User = {//crea
searchUser() {//when we fileds already filled
this.users = [];//clear users array
const user: User = {//create new user:User
firstName: this.searchForm.controls.firstNameControl.value,
lastName: this.searchForm.controls.lastNameControl.value,
login: this.searchForm.controls.userNameControl.value,
email: this.searchForm.controls.emailFormControl.value,
phoneNumber: this.searchForm.controls.phoneFormControl.value
};
for (var key in user) {
if (user[key] === "") { //check epmty data
delete user[key]; //delete unfilled properties
}
}
这不完全是我需要的,但它仍然有效
这些代码从数据库中获取数据
user.service.ts
export class UsersService extends BaseApi {
constructor(public http: HttpClient) {}
searchUser(): Observable<User[]> {
return this.get(`users`);//get users array from db*
}
}
建议通过rxjs执行,这样在subscribe方法中,您只需声明结果,就可以将所有逻辑传输到服务,并在每个表单控件上创建subscribe
>make subscribe on each form control
>key must calling like form control
>its subscrition initialize part
>create formgroup
this.searchForm = new FormGroup({
firstName: new FormControl("", [
Validators.required,
Validators.maxLength(20)
]),
lastName: new FormControl("", [Validators.maxLength(20)]),
login: new FormControl("", [Validators.maxLength(20)]),
email: new FormControl("", [Validators.pattern(/^(([^<>()\[\]\\.,;:\s@']+(\.[^<>()\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]),
phoneNumber: new FormControl("",Validators.maxLength(20),Validators.minLength(5),Validators.pattern(/^\d+$/)
])
});
//conveyor subscribing need on afterViewInit,onInit,+ when after clearForm()
Object.keys(this.searchForm.controls).forEach(key => {
this.subscribeControls(this.searchForm.controls[key], key);
});
//this an observable filtering
subscribeControls(currentControl: AbstractControl, key: string) {
currentControl.valueChanges
.pipe(
takeWhile(value => value !== null),
filter(value => value.length > 2),
debounceTime(500),
switchMap(value =>
this.userservice.searchUser().pipe(
map(arrays =>
arrays.filter(user => {
return !(
user[key].toLowerCase().indexOf(value.toLowerCase()) !== -1
)
? false
: true;
})
)
)
)
)
.subscribe(arr => {
ref: for (let index = 0; index < arr.length; index++) {
const element = arr[index];
const same = this.users.some(e => {
return e.id === element.id;//user needs unique _id
});
if (same) {
continue ref;
}
this.users.push(element);
}
console.log(this.users);//get matches!!!!!!!!!!!
});
}
>键必须像窗体控件一样调用
>它的订阅初始化部分
>创建表单组
this.searchForm=新表单组({
名字:新FormControl(“[
需要验证器,
验证器。maxLength(20)
]),
lastName:newformcontrol(“,[Validators.maxLength(20)]),
登录名:newformcontrol(“,[Validators.maxLength(20)]),
电子邮件:新FormControl(“,[Validators.pattern(/^([^()\[\]\\,;:\s@']+(\.[^()\[\]\,;:\s@']+)*)('.+')@(\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.}.],
phoneNumber:new FormControl(“),Validators.maxLength(20),Validators.minLength(5),Validators.pattern(/^\d+$/)
])
});
//输送机订阅需要在afterViewInit、onInit、+在clearForm()之后
Object.keys(this.searchForm.controls).forEach(key=>{
this.subscribeControls(this.searchForm.controls[key],key);
});
//这是一个可观察的过滤
subscribeControls(currentControl:AbstractControl,key:string){
currentControl.valueChanges
.烟斗(
takeWhile(值=>value!==null),
过滤器(值=>value.length>2),
去BounceTime(500),
开关映射(值=>
此.userservice.searchUser()管道(
映射(数组=>
arrays.filter(用户=>{
回来(
用户[key].toLowerCase().indexOf(value.toLowerCase())!=-1
)
?错误
:正确;
})
)
)
)
)
.订阅(arr=>{
参考:for(让索引=0;索引为什么不干脆让用户退出服务并更换它。用户??
{
"users": [
{
"id": 1,
"role": "admin",
"login": "aaaaaaaaaaa",
"email": "admin@admin.ua",
"password": "12345678",
"firstName": "Master",//thats repeating field with values
"lastName": "Supername",
"phoneNumber": "380669734571",
"addressType": "Shipping address",
"adressHome": "Pushkin str.",
"city": "Berlin",
"country": "Germany",
"postalCode": "555"
},
{
"id": 1,
"role": "admin",
"login": "ssssssss",
"email": "admin@admin.ua",
"password": "12345678",
"firstName": "Master", //thats repeating field with values
"lastName": "ssssss",
"phoneNumber": "123456789",
"addressType": "Shipping address",
"adressHome": "Pushkin str.",
"city": "Kiev",
"country": "Ukraine",
"postalCode": "555"
},
{
"id": 2,
"role": "user",
"login": "Burato",
"email": "user@user.ua",
"password": "123",
"firstName": "Ivan",
"lastName": "Ivanov",
"phoneNumber": "389506546541",
"addressType": "Shipping address",
"adressHome": "Ivanov str.",
"city": "Mosscow",
"country": "russia",
"postalCode": "555"`enter code here`
}
]
}
>make subscribe on each form control
>key must calling like form control
>its subscrition initialize part
>create formgroup
this.searchForm = new FormGroup({
firstName: new FormControl("", [
Validators.required,
Validators.maxLength(20)
]),
lastName: new FormControl("", [Validators.maxLength(20)]),
login: new FormControl("", [Validators.maxLength(20)]),
email: new FormControl("", [Validators.pattern(/^(([^<>()\[\]\\.,;:\s@']+(\.[^<>()\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]),
phoneNumber: new FormControl("",Validators.maxLength(20),Validators.minLength(5),Validators.pattern(/^\d+$/)
])
});
//conveyor subscribing need on afterViewInit,onInit,+ when after clearForm()
Object.keys(this.searchForm.controls).forEach(key => {
this.subscribeControls(this.searchForm.controls[key], key);
});
//this an observable filtering
subscribeControls(currentControl: AbstractControl, key: string) {
currentControl.valueChanges
.pipe(
takeWhile(value => value !== null),
filter(value => value.length > 2),
debounceTime(500),
switchMap(value =>
this.userservice.searchUser().pipe(
map(arrays =>
arrays.filter(user => {
return !(
user[key].toLowerCase().indexOf(value.toLowerCase()) !== -1
)
? false
: true;
})
)
)
)
)
.subscribe(arr => {
ref: for (let index = 0; index < arr.length; index++) {
const element = arr[index];
const same = this.users.some(e => {
return e.id === element.id;//user needs unique _id
});
if (same) {
continue ref;
}
this.users.push(element);
}
console.log(this.users);//get matches!!!!!!!!!!!
});
}