时间戳

首页 > 解决方案 > 如果来自管道过滤器的数据在Angular8中为空，如何显示自定义消息

angular - 如果来自管道过滤器的数据在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">

（它根据外部循环中的当前计划代码过滤文档）如何捕捉并放置“无语句”？由于我正在使用管道过滤器，这是一个棘手的部分。

标签： angularangular8angular-uiangular-pipe

解决方案

我认为您不应该返回过滤后的项目。添加一个引用变量并检查过滤的项目是否有长度。如果它大于 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;
  }
}

推荐阅读