如果来自管道过滤器的数据在Angular8中为空，如何显示自定义消息

问题描述

我有一个组件

<div *ngIf="(StatementData$ | async) as stmtData; else stillLoading">
  <div *ngFor="let p of plans">
    <h3>{{p.planShortName}}</h3>
    <div *ngFor="let s of stmtData.documents | PlanCodePipe : p.planCode">
      <span *ngIf="!s.isDownloading"><a (click)="fetchDocument(s);" class="click-link">{{s.label}}</a></span>
    </div>
  </div>
</div>

我有一个管道过滤器PlanCodePipe

export class PlanCodePipe implements PipeTransform {
  transform(items: any[],planCode: string): any {
    // console.log("in pipe for",sectionType);
    if (!items) return [];
    return items.filter(x => x.planCode === planCode);
  }
}

就像您在我的组件中看到的一样，有时此过滤器会导致0个匹配项。

<div *ngFor="let s of stmtData.documents | PlanCodePipe : p.planCode">

（它基于外部循环中的当前计划代码过滤文档） 如何抓住这一点并提出“不发表声明”？这是一个棘手的部分，因为我正在使用管道过滤器。

解决方法

我认为您不应该退回已过滤的项目。添加一个参考变量，并检查过滤后的项目是否有长度。如果大于0，则从那里创建一个标志，然后返回过滤后的项目，否则可能会引发错误或消息。这是我基于您的代码的示例。

export class PlanCodePipe implements PipeTransform {
  transform(items: any[],planCode: string): any {
    // console.log("in pipe for",sectionType);
    const planCode = items.filter(x => x.planCode === planCode);
    const filteredValues = (planCode.length === 0) ? 'No values found' : planCode;
    return filteredValues;
  }
}

,

我知道为时已晚，但它可能对其他人有帮助。

<p *ngIf="(stmtData.documents | PlanCodePipe : p.planCode)?.length <= 0">No record found!</p>