在源参数Angular 8 Pipe上始终未定义嵌套的ngFor中的过滤器答案

【问题标题】：filter in nested ngFor always undefined on source parameter Angular 8 Pipe在源参数Angular 8 Pipe上始终未定义嵌套的ngFor中的过滤器
【发布时间】：2019-11-21 05:06:05
【问题描述】：

我正在使用 Angular 8。

我有一个过滤器，它让我为它的源参数提供未定义的值，我不明白为什么，因为我总是可以将过滤器认为未定义的元素可视化。我有以下过滤器：

filter(source :string, target :string, method:Method) : boolean {
    console.log("filter");
    console.log(source, target, method);
    switch(method) {

      case "includes" : return source.includes(target)
      case "equal"  : return source === target
      case "not-equal" : return source !== target
    }

  }

}

type Method ="includes" | "equal" | "not-equal"

如果我根本不应用过滤器，我可以看到所有元素的以下 html：

  <div *ngFor="let cat of filteredArray | filter : 'cat.category' : selectedCategory : 'equal'" >
          <mat-tab *ngFor="let errlist of cat.errors" label="{{errlist.letter}}">
              <div class="tab-content ">
                  <ul class="errorUL ">
                    <li *ngFor="let item of errlist.errorList  " >
                         {{item.id}} - {{item.description}}
                     </li>
                    </ul>
              </div>

所以我在这里错过了什么？这不是过滤器的工作原理吗？

【问题讨论】：

标签： angular filter

【解决方案1】：

过滤器的声明看起来很混乱。我想你使用的是带有打字稿的 Angular 而不是 AngularJs，所以你必须使用管道而不是过滤器。 Here is the official guide upon this.

如果你仍然在使用 AngularJS 和过滤器，那么你的过滤器声明和使用在很多方面都是错误的。请查看this tutorial。简而言之：

您不使用像filter : 'category' 这样的过滤器。我记得，您使用了您声明此过滤器的关键字。不幸的是，我没有看到任何像 app.filter('makeUppercase', function () { 这样的声明，你可以在教程中找到。
AngularJS 方法属性中没有类型。
你必须告诉 AngularJS 你想访问这个过滤器的名字。
我看不出source 和selectedCategory 属性应该从哪里获取它们的值？

【讨论】：

我使用的是 Angular 8，是自定义管道

【解决方案2】：

在您的管道中，在我看来，您将对象数组作为 string 处理，然后返回单个字符串，而不是经过过滤的对象数组。

无论如何，这是我正在使用的过滤管道的示例

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

@Pipe({
    name: 'filter',
    pure: false
})
export class FilterPipe implements PipeTransform {

    transform(items: any, property: any, term: any): any {
        if (!term) {
            return items;
        }

        const result = items.filter(function (item) {

            if (item[property] === null) {
                return items;
            }
            if (item[property].toString().toLowerCase().includes(term.toLowerCase())) {
                return true;
            }
            return false;
        });
        if (result.length === 0) {
            return [-1];
        }
        return result;
    }
}

【讨论】：

【解决方案3】：

我写错了，用 cat.category 而不是 category

这是正确的方法：

 <div *ngFor="let cat  of filteredArray  | filter : 'category' : selectedCategory : 'equal'">

【讨论】：