javascript - ngfor 中的自定义过滤器管道〜错误 TypeError : Cannot read property 'filter' of undefined

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 表示您在 GroupByPipe 中的 items 未定义，这意味着您传递了错误参数。

通过修改您的模板即可修复它。

<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>

因为让结果项成为您发送到管道的第一个参数，并且该表达式的值是未定义。

<小时/>

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

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