如何在角自定义搜索管道中添加空状态

Question

我有一个表组件，在这里我使用*ngFor打印数组数据。

  <ng-container *ngFor="let element of array | search: searchInput">
        <tr>
          <td class="body_summary curved-border-table-left">
            <span
              class="count-5"
              [class.update-plugins-second]="element ['status'] === 'unread'"
              [class.update-plugins]="element ['status'] === 'read'"
            ></span>
            <span class="inner_text"> {{ report["title"] }} </span>
          </td>
        </tr>
      </ng-container>

在这里，我写了这样的自定义搜索管道

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
  name: "search",
})
export class SearchPipe implements PipeTransform {
  transform(reports: string[], searchInput: string): any[] {
    if (!searchInput) {
      return reports;
    }
    searchInput = searchInput.toLowerCase();
    return reports.filter((x: any) =>
      x?.title.toLowerCase().includes(searchInput)
    );
  }
}

在本例中，搜索功能运行良好，但我希望将空状态添加为

<p> No Records Found </p>

当在搜索管道中找不到记录时。

在当前的*ngContainer之后，我应该在哪里为它编写标记，我应该如何做到这一点？

Answer 1

只需在下面或上面添加类似的内容。

<ng-container *ngIf="(array | search: searchInput).lengt === 0">
  No results
</ng-container>

Answer 2

当数组中的任何元素都不满足条件时，JS Array#filter函数返回一个空数组。因此，您可以使用pipe将*ngIf封装在外部级别，并检查返回数组的长度。0的数值在Javascript中是无效的，因此当数组的长度为0时，else块将被呈现。

同时，看到CSS选择器update-plugins-second和update-plugins基于status属性的值是相互排斥的，它可以使用ngClass指令重写。

<ng-container *ngIf="(array | search: searchInput) as searchResults">
  <ng-container *ngIf="searchResults.length; else noResults">
    <tr *ngFor="let element of searchResults">
      <td class="body_summary curved-border-table-left">
        <span
          class="count-5"
          *ngClass="{
            'unread': 'update-plugins-second',
            'read': 'update-plugins'
          }[element['status']]"
        ></span>
        <span class="inner_text"> {{ report["title"] }} </span>
      </td>
    </tr>
  </ng-container>
  <ng-template #noResults>
    <p> No Records Found </p>
  </ng-template>
</ng-container>