ngFor отображать пользовательское сообщение, если оно пустое, если данные из pipe fitler пусты в Angular8

#angular #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>
  

у меня есть план-код фильтра канала

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

(он фильтрует документы на основе текущего кода плана из внешнего цикла)
как это перехватить и указать «Никаких утверждений»?

Ответ №1:

Вы можете использовать канал внутри своего скрипта и вернуть его.

Шаблон

 {{ isNoResults(stmtData.documents, p) ? 'NO RESULTS' : p.planShortName }}
  

Скрипт

 isNoResults(documents, p){
  let pipe = new PlanCodePipe();
  let transform = pipe.transform(documents, p.planCode);
  return transform?.length == 0;
}
  

Комментарии:

1. возвращать преобразование?.длина == 0; выдает ли мне ошибку, в которой говорится, что ожидаемое выражение

2. Также ‘no results’ не обязательно должно находиться там, где находится Plan Shortname .. я могу быть в div или ниже этого