Question

我正在使用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>

那么我在这里想念的是什么？这不是过滤器的工作原理吗？

Answer 1

在您的管道内，在我看来，您正在将一个对象数组作为 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;
    }
}

Answer 2

过滤器的声明看起来很混乱。我想您正在使用带有Typescript的Angular而不是AngularJs，因此您必须使用Pipes而不是过滤器。 Here is the official guide upon this。

如果仍然以某种方式使用AngularJS和过滤器，则过滤器的声明和用法在许多方面都是错误的。请查看this tutorial。简而言之：

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

Answer 3

我用cat.category而不是类别

写错了

这是正确的方法：

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

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

3 个答案: