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

Question

我有一个组件

<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">

（它根据来自外循环的当前计划代码过滤文档）如何抓住它并放置“无声明”？这是一个棘手的部分，因为我正在使用管道过滤器。

Answer 1

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

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;
  }
}

Answer 2

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

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

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

how to display custom message if data from pipe filter is empty in Angular8

angular-ui

angular-pipe

angular

angular8