Question

我正在研究一个在ngFor循环中使用的过滤器，我遇到了错误以及另一个问题。

我的烟斗似乎很简单。我传递一个id号的参数来过滤，然后将其与一个对象属性进行比较：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'groupBy'
})

export class GroupByPipe implements PipeTransform {

    transform(items: any, groupId: number ): any {
        console.log(groupId);
        items.filter(items => items.storyFunnelStatusId === groupId);
    }

}

然后我的模板我将前一个循环中的column.id作为过滤器的参数：

<div class="board-container">
    <div class="board-column" *ngFor="let column of columnNames">
        <div class="board-heading">
            {{ column.name }}
            <span class="count">4</span>
        </div>
        <div id="column-{{ column.id }}" class="card-body">
            <div *ngFor="let item of results | groupBy: column.id">
                <pre>{{ item | json }}</pre>
            </div>
        </div>
    </div>
</div>

两个问题，首先是我遇到控制台错误：ERROR TypeError: Cannot read property 'filter' of undefined

第二个是当我尝试console.log('groupId')时，我得到10个结果，我应该得到一个。

把我的头发拉出来:(

Answer 1

ERROR TypeError: Cannot read property 'filter' of undefined表示items中的GroupByPipe未定义，这意味着您将错误的参数传递给它。

通过修改模板将修复它。

<div class="board-container">
    <div class="board-column" *ngFor="let column of columnNames">
        <div class="board-heading">
            {{ column.name }}
            <span class="count">4</span>
        </div>
        <div id="column-{{ column.id }}" class="card-body">
            <div *ngFor="let item of (results | groupBy: column.id)">
                <pre>{{ item | json }}</pre>
            </div>
        </div>
    </div>
</div>

因为let item of results成为您发送给管道的第一个参数，并且此表达式的值为undefined。

同时你可以在管道的实现中添加一些安全检查，如下所示：

transform(items: [any], groupId: number ): any {
    console.log(groupId);
    if(items instanceof Array) {
        return items.filter(items => items.storyFunnelStatusId === groupId);
    }
    return [];
}

自定义过滤器管道在ngfor~ERROR中类型错误：无法读取未定义的属性“过滤器”

1 个答案: