如何使用 angular 4 显示在网格 table 中找不到数据？

Question

您好，我正在使用 angular 4，我需要在搜索网格 table 搜索框时显示 no data found，它没有显示，如何显示？？？？？

pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'category' })
export class CategoryPipe implements PipeTransform {
  transform(categories: any, searchText: any): any {
   if(searchText == null) return categories;

  return categories.filter(function(category){
      return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1; 
    })
  }
}

ang.html:

  div class="form-group"> <div class="col-md-6" >
    <input type="text" [(ngModel)]="searchText"  class="form-control" placeholder="Search By Category" />
                    </div> </div>  
    <div class="col-md-12">
        <table class="table table-responsive table-hover">
          <tr>
            <th >Category ID</th>
            <th>Category</th>
            <th>Description</th>
          </tr>
          <tr *ngFor="let item of records | category: searchText">  
        <div *ngIf="(item | category: searchText).length === -1">
                "No data matches"</div>        
            <td>{{item.CategoryID}}</td>
            <td>{{item.CategoryName}}</td>
            <td>{{item.Description}}</td>                
          </tr>
        </table>
      </div>

组件：这是在网格 table、

中显示值的组件

this.records= [
    { CategoryID: 1,  CategoryName: "Beverages", Description: "Coffees, teas" },
    { CategoryID: 2,  CategoryName: "Condiments", Description: "Sweesavory" },];

Answer 1

替换

<div *ngIf="(item | category: searchText).length === -1">

和

<div *ngIf="(item | category: searchText).length === 0">

长度永远不能小于 0

编辑：我看错了代码。试试这个

  <tr *ngIf="(records | category: searchText).length === 0">
            <td colspan=3>No data matches"</td>
  </tr> 

  <tr *ngFor="let item of records | category: searchText">  
    <td>{{item.CategoryID}}</td>

如何使用 angular 4 显示在网格 table 中找不到数据？

how to show no data found in grid table uisng angular 4?

datatable

gridview

angular-pipe

angular