角度 2. 管道。无法读取未定义的属性答案

【问题标题】：angular 2. Pipes. Cannot read property of undefined角度 2. 管道。无法读取未定义的属性
【发布时间】：2016-08-24 17:40:53
【问题描述】：

我做了一个烟斗

@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 中使用管道错误吗？

【问题讨论】：

标签： angular pipes-filters

【解决方案1】：

鉴于您提供的模板，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)
       }
}

其中表达式指的是组件的成员，比如说：

filterExpression: string;

然后将输入文本更改为：

<input type="text" [(ngModel)]="filterExpression">

并将管道调用更改为：

<tr *ngFor="#organization of organizations | orgFilter:filterExpression">

根据documentation 的列表过滤器，您可能必须使用以下命令将您的管道声明为不纯：

@Pipe({
  name: 'orgFilter',
  pure: false

})

【讨论】：

我试过了，但没用。问题在于 let filter = args[0].toLowerCase();这是否意味着错误是由没有值的 args 引起的（如果我理解正确，这是我想要过滤的词）？但是当我刚刚打开页面时它不能有值。对吗？

【解决方案2】：

要么是 args 未定义，要么 org.name 未定义。您可以尝试在 DevTools 中调试它，也可以在 transform() 开头设置断点

【讨论】：