Angular 4网格表格无数据提示实现：含搜索场景问题咨询

Hey there! Let's fix those two issues with your Angular 4 grid component one by one. I'll break down the solutions with code examples for your pipe, template, and component files.

First, let's get the empty state working for when the original dataset has no records. We'll add a conditional message in your template that shows only when there's no data to display.

Update your ang.html template: #

<!-- Your existing grid table -->
<table class="data-grid">
  <thead>
    <!-- Your table headers here -->
  </thead>
  <tbody>
    <tr *ngFor="let item of filteredData">
      <!-- Your table cell content (e.g., {{ item.id }}, {{ item.name }}) -->
    </tr>
  </tbody>
</table>

<!-- No data fallback -->
<div *ngIf="filteredData.length === 0" class="no-data-message">
  无数据
</div>

Add some basic CSS to style the message (put this in your component's CSS file):

.no-data-message {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
  font-size: 1.2rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

The problem here is likely that your search pipe is either returning undefined when no matches are found, or you're checking the wrong dataset length in the template. Let's fix this with two approaches—pick the one that fits your workflow best.

Approach 1: Handle Filtering in the Component (Recommended) #

Directly using pipes in templates can cause unnecessary re-runs during change detection. Instead, let's move the filtering logic to your component so we have full control over the filtered dataset.

Step 1: Update your component class #

import { Component, OnInit } from '@angular/core';
import { SearchPipe } from './pipe.ts';

export class YourGridComponent implements OnInit {
  // Original unfiltered dataset
  originalData: any[] = [];
  // Filtered dataset we'll use in the template
  filteredData: any[] = [];
  // Search term bound to your input
  searchTerm: string = '';

  constructor(private searchPipe: SearchPipe) {}

  ngOnInit() {
    // Assume this is where you fetch or initialize your original data
    // this.originalData = yourDataSource;
    this.filteredData = [...this.originalData];
  }

  // Trigger filtering when the search input changes
  onSearchInputChange() {
    this.filteredData = this.searchPipe.transform(this.originalData, this.searchTerm);
  }
}

Step 2: Update your template's search input #

<input 
  type="text" 
  [(ngModel)]="searchTerm" 
  (input)="onSearchInputChange()" 
  placeholder="搜索..."
>

Now, whether your original dataset is empty or the search returns no matches, filteredData.length will be 0, and the "无数据" message will show correctly.

Approach 2: Fix the Search Pipe (If You Want to Keep Using It in the Template) #

If you prefer to keep using the pipe directly in the template, make sure it always returns an array (never undefined or null), so the length check works reliably.

Update your pipe.ts file: #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'searchPipe' })
export class SearchPipe implements PipeTransform {
  transform(items: any[], searchTerm: string): any[] {
    // Return empty array if input is null/undefined
    if (!items) return [];
    // Return original array if search term is empty
    if (!searchTerm.trim()) return [...items];

    const lowerCaseTerm = searchTerm.toLowerCase();
    // Filter items based on your search logic (adjust this to match your data structure)
    return items.filter(item => {
      return item.name?.toLowerCase().includes(lowerCaseTerm) || 
             item.id?.toString().includes(lowerCaseTerm);
    });
  }
}

Update the template's empty state check: #

<div *ngIf="(originalData | searchPipe: searchTerm).length === 0" class="no-data-message">
  无数据
</div>

This ensures that even when the pipe filters out all items, it returns an empty array, so the length check triggers the message.

内容的提问来源于stack exchange，提问作者Ajith Deivam