Html 角度,无法访问自定义管道中数组中对象的成员
下面是我的自定义管道,我无法访问类型为Item的customfilter数组的成员Html 角度,无法访问自定义管道中数组中对象的成员,html,angular,typescript,Html,Angular,Typescript,下面是我的自定义管道,我无法访问类型为Item的customfilter数组的成员 import { Pipe, PipeTransform } from '@angular/core'; import {Bus} from '/home/pavan/Desktop/Pavan/apstrtcAngular/src/app/Bus'; import { Item } from './Item'; @Pipe({ name: 'busFilter' }) export class B
import { Pipe, PipeTransform } from '@angular/core';
import {Bus} from '/home/pavan/Desktop/Pavan/apstrtcAngular/src/app/Bus';
import { Item } from './Item';
@Pipe({
name: 'busFilter'
})
export class BusFilterPipe implements PipeTransform {
transform(items: Bus[], customfilter: Item): Bus[] {
if(!items || !customfilter)
{
return items;
}
return items.filter((item: Bus)=>
this.applyFilter(item, customfilter));
}
applyFilter(bus:Bus, customfilter: Item):
boolean{
if( customfilter[0].item_id){
if(typeof customfilter[0].item_id==='string'){
if(typeof bus.bustype==='string')
{
if(customfilter[0].item_id===bus.bustype)
{
return false;
}
} }
}
return true;
}
}
下面是我的Item.ts和ng multiselect
export class Item {
/**
* @type {number} id Unique numeric identifier.
*/
item_id: string;
item_text:string;
}
<ng-multiselect-dropdown class="ngfilter"
[placeholder]="'Select BusType'"
[data]="BusTypes"
[(ngModel)]="customfilter"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"></ng-multiselect-dropdown>
导出类项目{
/**
*@type{number}id唯一的数字标识符。
*/
项目标识:字符串;
项目_文本:字符串;
}
我在这里找不到问题,我也无法在调试期间查看item_id的值。请帮助我了解问题所在。非常感谢。
根据您的评论和我对管道中编写的代码的理解,像这样修改管道(请通读代码中的评论): 下面是一个javascript脚本,用于验证结果
函数转换(项、自定义过滤器){
如果(!items | |!customfilter)
{
退货项目;
}
//将自定义筛选器设置为数组(如果尚未设置)
customFilter=数组的customFilter实例?customFilter:[customFilter];
//您似乎忽略了没有item_id的自定义筛选器
customFilter=customFilter.filter((eachCustom)=>eachCustom.item\u id);
//创建满足条件的新项目数组
返回项目。减少((acc、eachBus)=>{
//如果总线的bustype不是字符串,则无需进行筛选
if(typeof eachBus.bustype!=“string”){
acc.push(每辆车)
}
否则{
//如果bustype是字符串
//然后,您必须查看此总线的bustype是否匹配任何自定义筛选器及其id类型
//如果未找到,则该总线应出现在最终总线列表中
让filterFound=customFilter.findIndex((每个过滤器)=>{
返回(类型eachFilter.item_id=='string')&&(类型eachBus.bustype=='string')&&(eachFilter.item_id===eachBus.bustype);
});
如果(filterFound==-1){
//在筛选器中找不到此总线
acc.push(每辆车)
}
}
返回acc;
}, [])
}
让公交车=[{bustype:1},{bustype:“沃尔沃ac”},{bustype:“沃尔沃非ac”},{bustype:“非沃尔沃非ac”},{bustype:“非沃尔沃非ac”}]
let customFilter=[{item_id:“volvo ac”},{item_id:“非volvo ac”}]
控制台日志(转换(总线、自定义过滤器))
//预期输出将不包含筛选器中存在的总线
从'@angular/core'导入{Pipe,PipeTransform};
从“/home/pavan/Desktop/pavan/apstrtcAngular/src/app/Bus”导入{Bus};
从“./Item”导入{Item};
从'@angular/router/src/utils/collection'导入{forEach};
@烟斗({
名称:“总线过滤器”
})
导出类BusFilterPipe实现PipeTransform
{
转换(项:总线[],自定义筛选器:项[]):总线[]{
让结果集:总线[]=[];
如果(!items | |!customfilter){
退货项目;
}
else if(customfilter.length==0){
退货项目;
}
否则{
for(设i=0;i
自定义过滤器[0]
??它是数组还是类实例?请尝试customfilter.item\u id
还请说明如何在模板中使用管道谢谢rajan,实际上是我在if条件中指定错误值的错误。但我还有一个问题。如果customFilter数组中有两个以上的值,则无法多次迭代json。请告诉我怎么做。提前感谢。customfilter是具有两个属性(item\u id、item\u text)的item类型数组。如果它是数组,那么您应该能够进行迭代,请显示完整的代码以解答您的疑问。。请显示数组以及如何/在何处迭代Hello Ashish,仅当customfilter的长度为1时,上述操作才起作用。我只需要一种使用长度大于1的customfilter数组进行过滤的方法。感谢you@PavanSista:据我所知,它适用于我,请参阅可执行代码,它的customFilter包含多个筛选器。我可以执行该代码,但它仅适用于数组customFilter的第一个对象,数组的第二个对象没有输出。@PavanSista:分析代码,首先检查它是否符合您的要求,您可能有一些其他键,而不是我正在使用的键,或者其他一些条件,看看为什么答案中的可执行脚本能够从自定义筛选器数组中筛选出来,以及为什么您的自定义筛选器无法工作。我将对此进行研究。谢谢你帮我。
transform(items: Bus[], customfilter: Item[]): Bus[] {
if(!items || !customfilter)
{
return items;
}
// making custom filter an Array if it isn't already
customFilter = customFilter instanceof Array ? customFilter : [customFilter];
// you seem to ignore the custom filters which don't have item_id
customFilter = customFilter.filter((eachCustom) => eachCustom.item_id);
// create an array of new items which satisfy your criteria
return items.reduce((acc, eachBus) => {
// if bus's bustype is not string then no need to filter
if (typeof eachBus.bustype != 'string') {
acc.push(eachBus)
}
else {
// if the bustype is a string
// then you have to see if this bus's bustype matches any of the custom filters and it's id type
// if not found then that bus should be present in the final bus list
let filterFound = customFilter.findIndex((eachFilter) => {
return (typeof eachFilter.item_id === 'string') && (typeof eachBus.bustype === 'string') && (eachFilter.item_id === eachBus.bustype);
});
if (filterFound === -1) {
// this bus is not found in the filter
acc.push(eachBus)
}
}
return acc;
}, [])
}
import { Pipe, PipeTransform } from '@angular/core';
import {Bus} from '/home/pavan/Desktop/Pavan/apstrtcAngular/src/app/Bus';
import { Item } from './Item';
import { forEach } from '@angular/router/src/utils/collection';
@Pipe({
name: 'busFilter'
})
export class BusFilterPipe implements PipeTransform
{
transform(items: Bus[], customfilter: Item[]): Bus[] {
let ResultSet: Bus[] = [];
if (!items || !customfilter) {
return items;
}
else if (customfilter.length == 0) {
return items;
}
else{
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < customfilter.length; j++) {
if (customfilter[j].item_text === items[i].bustype) {
ResultSet.push(items[i]);
console.log("Result Set =" + ResultSet);
}
}
}
return ResultSet;
}
}
}