angular 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 中使用它:
<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)
问题出在哪里?这是否意味着 args 没有任何值?我在 html 中使用管道错误吗?
可能是 args
未定义或 org.name
未定义。你可以尝试在DevTools中调试它,也许在transform()
的开头设置断点
根据您提供的模板,Organization 实例似乎没有名为 "name" 的成员,而是一个名为 "organizationName" 的成员。
也许你可以尝试替换
org.name.toLowerCase().indexOf(filter) != -1
与
org.organizationName.toLowerCase().indexOf(filter) != -1
在您的代码中。
更新
也就是说,您可以尝试使用不同的方式来绑定您的过滤器表达式:
@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)
}
}
其中 expression 指的是组件的成员,比方说:
filterExpression: string;
然后将您的输入文本更改为:
<input type="text" [(ngModel)]="filterExpression">
并将管道调用更改为:
<tr *ngFor="#organization of organizations | orgFilter:filterExpression">
根据列表过滤器的 documentation,您可能必须使用以下方法声明管道不纯:
@Pipe({
name: 'orgFilter',
pure: false
})
我做了一个烟斗
@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 中使用它:
<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)
问题出在哪里?这是否意味着 args 没有任何值?我在 html 中使用管道错误吗?
可能是 args
未定义或 org.name
未定义。你可以尝试在DevTools中调试它,也许在transform()
根据您提供的模板,Organization 实例似乎没有名为 "name" 的成员,而是一个名为 "organizationName" 的成员。
也许你可以尝试替换
org.name.toLowerCase().indexOf(filter) != -1
与
org.organizationName.toLowerCase().indexOf(filter) != -1
在您的代码中。
更新
也就是说,您可以尝试使用不同的方式来绑定您的过滤器表达式:
@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)
}
}
其中 expression 指的是组件的成员,比方说:
filterExpression: string;
然后将您的输入文本更改为:
<input type="text" [(ngModel)]="filterExpression">
并将管道调用更改为:
<tr *ngFor="#organization of organizations | orgFilter:filterExpression">
根据列表过滤器的 documentation,您可能必须使用以下方法声明管道不纯:
@Pipe({
name: 'orgFilter',
pure: false
})