Tengo un componente de tabla, donde estoy imprimiendo los datos de la matriz usando *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>Aquí, he escrito un tubo de búsqueda personalizado como este
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) ); } }En este caso, la funcionalidad de búsqueda funciona bien, pero quiero agregar un estado vacío como
<p> No Records Found </p>cuando no se encuentran registros en la tubería de búsqueda.
¿Dónde debo escribir el marcado para esto después del actual *ngContainer y cómo debo hacer esto?
La función JS Array#filter devuelve una matriz vacía cuando ninguno de los elementos de la matriz cumple la condición. Entonces, envuelve la pipe en un nivel externo usando un *ngIf y verifica la longitud de la matriz que regresa. El valor numérico 0 es falso en Javascript, por lo que el bloque else se representará cuando la longitud de la matriz sea 0.
Además, dado que los selectores de CSS update-plugins-second y update-plugins se excluyen mutuamente en función del valor de la propiedad de status , podría reescribirse utilizando la directiva 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>simplemente agregue algo como esto debajo o arriba.
<ng-container *ngIf="(array | search: searchInput).lengt === 0"> No results </ng-container>