没有管道的过滤器Angular 6:压倒性问题 [英] Filters without pipe Angular 6: overriding problem
问题描述
我有两类过滤器:group
和name
.我该如何修改此代码,因为它们不能作为管道工作,它们是独立的,并且name
过滤器会覆盖group
过滤器,并且会向后覆盖.
I have 2 categories of filters: group
and name
. How can I modify this code because they are not working as a pipe, they are independent, and the name
filter overrides group
filter, and backward.
.ts
changeGroup(event) {
const group = event.target.value;
const index = this.groupValue.indexOf(group);
if (index > -1) {
this.groupValue.splice(index, 1);
} else {
this.groupValue.push(group);
}
this.transform(this.usersList, 'group', this.groupValue)
if (this.groupValue.length == 0) {
this.transform(this.usersList, '', this.groupValue)
}
}
changeUser(event) {
const user = event.target.value;
const index = this.userValue.indexOf(user);
if (index > -1) {
this.userValue.splice(index, 1);
} else {
this.userValue.push(user);
}
this.transform(this.usersList, 'name', this.userValue)
if (this.userValue.length == 0) {
this.transform(this.usersList, '', this.userValue)
}
}
transform(items: any[], field: string, value: string[]): any[] {
if (!items) {
return [];
}
if (!field || !value || value.length <= 0) {
return items
}
this.newArray = items.filter(singleItem => {
return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
});
return this.newArray
}
.html
<ng-container *ngFor="let group of groups">
<label class="btn btn-filter" id="bttns">
<input type="checkbox" name="customersGroupFilter" autoComplete="off" [value]="group" (change)="changeGroup($event)">
{{ group }}
</label>
</ng-container>
<br>
<ng-container *ngFor="let user of users">
<label class="btn btn-filter" id="bttns">
<input type="checkbox" name="customersUserFilter" autoComplete="off" [value]="user" (change)="changeUser($event)">
{{ user }}
</label>
</ng-container>
<table>
<thead>
<tr>
<th>Name</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of newArray">
<td>{{user.name}}</td>
<td>{{user.group}}</td>
</tr>
</tbody>
</table>
谢谢您的时间!
推荐答案
请检查下面的 app.component.ts ,无需进行额外的转换登录.只需在此文件中添加 get 属性读取器" filteredArray ",就可以使用以下方法,而无需使用管道.
Please check the app.component.ts below no need of extra transforming login. just add a get property reader "filteredArray" in this file, You can use following approach without using pipe.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name: string;
groups = ['a', 'b', 'c']
users = ['john', 'mike', 'doe', 'tim']
usersList = [
{ 'name': 'john', 'group': 'a' },
{ 'name': 'mike', 'group': 'a' },
{ 'name': 'doe', 'group': 'b' },
{ 'name': 'tim', 'group': 'c' }]
groupValue: string[] = []
userValue: string[] = []
newArray = []
ngOnInit() {
this.newArray = this.usersList.slice()
}
changeGroup(event) {
const group = event.target.value;
const index = this.groupValue.indexOf(group);
if (index > -1) {
this.groupValue.splice(index, 1);
} else {
this.groupValue.push(group);
}
}
changeUser(event) {
const user = event.target.value;
const index = this.userValue.indexOf(user);
if (index > -1) {
this.userValue.splice(index, 1);
} else {
this.userValue.push(user);
}
}
get filteredArray() {
let arrayData = [];
if (this.groupValue.length === 0 && this.userValue.length === 0) {
return this.usersList;
}
return this.usersList.filter((user) => {
return (this.userValue.length > 0 ? this.userValue.indexOf(user.name) !== -1 : true)
&& (this.groupValue.length > 0 ? this.groupValue.indexOf(user.group) !== -1 : true);
})
}
}
下面对应的app.component.html代码.
corresponding app.component.html code below.
<ng-container *ngFor="let group of groups">
<label class="btn btn-filter" id="bttns">
<input type="checkbox" name="customersGroupFilter" autoComplete="off" [value]="group" (change)="changeGroup($event)">
{{ group }}
</label>
</ng-container>
<br>
<ng-container *ngFor="let user of users">
<label class="btn btn-filter" id="bttns">
<input type="checkbox" name="customersUserFilter" autoComplete="off" [value]="user" (change)="changeUser($event)">
{{ user }}
</label>
</ng-container>
<table>
<thead>
<tr>
<th>Name</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of filteredArray">
<td>{{user.name}}</td>
<td>{{user.group}}</td>
</tr>
</tbody>
</table>
供参考,添加了嵌入式屏幕截图.
for Reference added a inline screenshot.
这篇关于没有管道的过滤器Angular 6:压倒性问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!