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

Question

我有一个 table 组件，我在其中使用 *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

JSArray#filter函数returns一个空数组，当数组的none个元素满足条件。因此，您使用 *ngIf 将 pipe 包裹在外层并检查返回数组的长度。数值0在Javascript中是假的，所以else块将在数组长度为0时呈现。

还看到 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>

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

How to add an empty state in angular custom search pipe

javascript

pipe

angular