角钢2.管道.无法读取未定义的属性 [英] angular 2. Pipes. Cannot read property of undefined
问题描述
我制造了烟斗
@Pipe({
name: 'orgFilter'
})
export class OrgFilterPipe implements PipeTransform {
transform(orgs: Organization[], args: String[]): any {
console.log(orgs)
let filter = args[0].toLowerCase();
return filter ? orgs.filter((org:Organization) => org.name.toLowerCase().indexOf(filter) != -1): orgs;
}
并在html中使用它:
and using it in html:
<tbody>
<tr *ngFor="#organization of organizations | orgFilter:listFilter.value">
<td>{{ organization.organizationName }}</td>
<td>{{ organization.city }}</td>
<td>{{ organization.state }}</td>
<td>{{ organization.country }}</td>
<td>
<i class="material-icons">mode_edit</i>
</td>
<td>
<i class="material-icons">delete</i>
</td>
</tr>
<tr>
<td>
<div class="col-md-4"><input type="text" #listFilter (keyup)="0" /></div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
我遇到错误 browser_adapter.js:84 TypeError:无法读取未定义的属性"toLowerCase" 在t.transform(orgFilter.ts:9)
i am getting an error browser_adapter.js:84 TypeError: Cannot read property 'toLowerCase' of undefined at t.transform (orgFilter.ts:9)
问题出在let filter = args [0] .toLowerCase();.
the problem lies in let filter = args[0].toLowerCase();
是什么原因造成的?这是否意味着args没有任何值?我应该在某处声明它吗?我在html中使用管道错误吗? 如果我删除管道,则会看到带有数据的表格.但是当我将其放入html中时,数据消失了,表中只有此输入字段
what is causing it? does this mean that args doesn't have any values? should i declare it somewhere? am i using pipe wrong in html? if i remove the pipe i see table with data. but when i put it into html the data disappears and there is only this input field in the table
推荐答案
鉴于您提供的模板,看来Organization的实例没有名为"name"的成员,而是名为"organizationName"的成员.
Given the template you provided, it looks like instances of Organization have no member called "name", but a member called "organizationName" instead.
也许您可以尝试替换
org.name.toLowerCase().indexOf(filter) != -1
使用
org.organizationName.toLowerCase().indexOf(filter) != -1
在您的代码中.
更新
也就是说,您可以尝试使用其他方法来绑定表达式:
That said, you can try a different way of binding you filter expression:
@Pipe({
name: 'orgFilter'
})
export class OrgFilterPipe implements PipeTransform {
transform(orgs: Organization[], expression:string): any {
if(!expression){
return orgs;
}
else {
return orgs.filter((org:Organization) => org.organizationName.toLowerCase().indexOf(expression) != -1)
}
}
其中表达式是指组件的成员,例如:
Where expression refers to a member of your component, let's say:
filterExpression: string;
然后将输入文本更改为:
Then change your input text to:
<input type="text" [(ngModel)]="filterExpression">
并将管道调用更改为:
<tr *ngFor="#organization of organizations | orgFilter:filterExpression">
根据文档对于列表过滤器,您可能需要使用以下命令声明您的管道不纯:
According to the documentation for a list filter you may have to declare your pipe as impure using:
@Pipe({
name: 'orgFilter',
pure: false
})
这篇关于角钢2.管道.无法读取未定义的属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!