即使我的应用程序工作，Angular也会抛出错误

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)

在错误中，它表示无法读取属性“过滤器”。 'filter'是我的管道名称：

@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

MEMBERS: MembersInterface[];

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

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

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

Answer 2

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

最简单的解决方案是使用空数组初始化它：

export class MembersComponent implements OnInit {

  MEMBERS: MembersInterface[] = [];

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