Question

嗨我正在使用角度4，我需要显示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>

成分：这是显示网格表中的值的一个组件，

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

长度永远不能＆lt; 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>

如何显示在网格表uisng angular 4中找不到数据？

1 个答案: