Question

我做了一个过滤数据的管道。这很完美，但是奇怪的是，我得到了错误。为什么？

这是错误：

ERROR TypeError: Cannot read property 'filter' of undefined
    at FilterPipe.push../src/app/filter.pipe.ts.FilterPipe.transform (main.js:248)
    at checkAndUpdatePureExpressionInline (vendor.js:84259)
    at checkAndUpdateNodeInline (vendor.js:84828)
    at checkAndUpdateNode (vendor.js:84786)
    at debugCheckAndUpdateNode (vendor.js:85420)
    at debugCheckDirectivesFn (vendor.js:85380)
    at Object.eval [as updateDirectives] (ng:///AppModule/MembersComponent.ngfactory.js:122)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:85372)
    at checkAndUpdateView (vendor.js:84768)
    at callViewAction (vendor.js:85009)

在错误中指出无法读取属性“过滤器”。 “过滤器”是我的管道的名称：

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

  transform(werte: any, kriterium: any ): any {
    if (kriterium === undefined) {
      return werte;
    }
    return werte.filter((member: { memberName: { toLowerCase: () => { includes: (arg0: any) => void; }; }; }) => {
      return member.memberName.toLowerCase().includes(kriterium.toLowerCase());
    });
  }
}

在html文件中，我也没有得到任何错误：

<div *ngFor="let member of MEMBERS | filter:memberFilter">
  <div>{{member.memberName}}</div>
  <div>{{member.memberRank}}</div>
  <div>{{member.memberBeschreibung}}</div>
  <hr>
</div>

我在这里为数据服务：

export class MembersComponent implements OnInit {

  MEMBERS: MembersInterface[];

  memberFilter = '';

  constructor(private memberService: MemberServiceService) { }

  ngOnInit() {
    this.memberService.getMembers().subscribe(member => {
      this.MEMBERS = member;
    });
  }

}

即使我的应用程序正常运行，为什么Angular也会引发错误？

Answer 1

您的getMembers函数可能是异步的，因此您的过滤器第一次运行MEMBERS仍未定义，因为该函数尚未完成。然后，当您进入过滤器中的return werte.filter时，您会得到错误消息。但是在函数完成之后，它确实具有一个值，这就是为什么程序仍然可以工作的原因。

最简单的解决方案是使用一个空数组对其进行初始化：

export class MembersComponent implements OnInit {

  MEMBERS: MembersInterface[] = [];

然后它将始终具有一个值，因此您不应遇到该错误。

Answer 2

MEMBERS: MembersInterface[];

MEMBERS最初是未定义的。因此ngFor会中断，因为在您获得成员之前它不会获得任何可迭代的值。

您可以为成员分配一个默认值，即空数组：

MEMBERS: MembersInterface[] = [];

或者，

使用ngIf来包装模板，就像这样：-

<ng-container *ngIf="MEMBERS"> // will be true only if MEMBERS has some value other than undefined/empty/false
<div *ngFor="let member of MEMBERS | filter:memberFilter">
  <div>{{member.memberName}}</div>
  <div>{{member.memberRank}}</div>
  <div>{{member.memberBeschreibung}}</div>
  <hr>
</div>
</ng-container>

编辑：感谢John Montgomery提出了一种比跨度更好的方法（ng-container）。

即使我的应用程序正常工作，Angular也会引发错误

2 个答案: