我有一个Object
,用于管理从后端接收的数据。
它以display: false
的所有字段启动,如果我从服务器收到该特定字段,我最终会将其更改为true
。
filterGroups(初始):
export let filterGroups: any = {
genericFilters: {
iboId: {
'display': false,
'template': ''
},
iboCode: {
'display': false,
'template': 'text/iboCode'
},
iboName: {
'display': false,
'template': 'text_input_iboName'
},
iboSurname: {
'display': false,
'template': 'text_input_iboSurname'
},
iboRank: {
'display': false,
'template': 'select/multi_iboRank',
},
iboEmail: {
'display': false,
'template': 'text_input_iboEmail'
},
iboNewsletter: {
'display': false,
'template': 'select/simple_iboNewsletter',
},
},
orderFilters: {
iboTotalOrders: {
'display': false,
'template': 'compound/iboTotalOrders',
}
},
peFilters: {
iboTotalPE: {
'display': false,
'template': 'checkbox/iboTotalPE',
}
},
};
在我的模板中,我希望尽可能多的div
作为过滤器组。在这种情况下,我们有3个过滤器组:genericFilters
,orderFilters
和peFilters
。
一旦我从服务器(我在Object
中调用)收到数据,就会修改此constructor
。
所以,在我收到异步通话中的数据后,我的filterGroups
将会是这样的。
filterGroups(在异步调用之后):
export let filterGroups: any = {
genericFilters: {
iboId: {
'display': true,
'template': ''
},
iboCode: {
'display': true,
'template': 'text/iboCode'
},
iboName: {
'display': true,
'template': 'text_input_iboName'
},
iboSurname: {
'display': true,
'template': 'text_input_iboSurname'
},
iboRank: {
'display': false,
'template': 'select/multi_iboRank',
},
iboEmail: {
'display': true,
'template': 'text_input_iboEmail'
},
iboNewsletter: {
'display': false,
'template': 'select/simple_iboNewsletter',
},
},
orderFilters: {
iboTotalOrders: {
'display': true,
'template': 'compound/iboTotalOrders',
}
},
peFilters: {
iboTotalPE: {
'display': false,
'template': 'checkbox/iboTotalPE',
}
},
};
现在,在我的模板中,我有这个:
模板(HTML):
<div *ngFor="let group of filterGroups | keysCheckDisplay">
<div>
<h4>{{group.key}}</h4>
</div>
</div>
而且,显而易见,这是我的@Pipe
。
@Pipe:
import { PipeTransform, Pipe } from '@angular/core';
import { isNullOrUndefined } from 'util';
@Pipe({name: 'keysCheckDisplay'})
export class KeysCheckDisplayPipe implements PipeTransform {
transform(value, args: string[]): any {
let keys = [];
for (let key in value) {
if (!isNullOrUndefined(value[key])) {
let display = false;
for (let keyChild in value[key]) {
if (!isNullOrUndefined(value[key][keyChild]) && value[key][keyChild]['display'] === true) {
display = true;
break;
}
}
if (display === true) {
keys.push({key: key, value: value[key]});
}
}
}
return keys;
}
}
在这个@Pipe
中你可以看到我做了几件事:
filterGroups
对象display: true
的孩子。功能:
我希望此@Pipe
遍历我的Object
并返回至少包含display: true
的1个元素的'过滤器组'。
问题:
@Pipe
正在获取filterGroups
对象的第一个版本,并且忽略了一旦我从服务器接收数据,对象就会发生变化的事实。
如果修改@Pipe
对象的初始值,filterGroups
可以正常工作。
我尝试了什么:
@Pipe
更改为inpure,但我讨厌这个解决方案,因为它的性能很差,而且它进入了无限循环。 *ngFor="let group of filterGroups | async | keysCheckDisplay"
。
但它抛出了以下错误:错误:InvalidPipeArgument:管道'AsyncPipe'的'[object Object]'
可能的解决方案?
修改@Pipe
?
修改初始object
?
创建第二个@Pipe
以循环显示第一个Pipe的结果?
我希望它详细而清晰,如果没有,请不要发表评论,要求提供更多细节,我很乐意更新帖子。
事先谢谢!
答案 0 :(得分:2)
仅在数据更改时调用纯管道。这意味着什么时候&#34;数据&#34;是一个新的对象实例。如果仅修改了对象的内容,则角度变化检测不会将其识别为更改并且不会调用管道。
可能的方法
var tmp = this.data; this.data = {}; Object.assign(this.data, tmp);
*ngFor="let item of data | myPipe:counter"
// updated `data`
// this.counter++;