如何在Angular2中基于输入框实现用户名数据过滤（附HTML代码）

Got it, let's walk through the full setup to get your username (or company name) filtering working in Angular, building on the code snippet you provided. Here's what you need to do step by step:

1. Create a Custom Filter Pipe #

Angular removed the built-in filter pipe a while back, so we’ll build our own messagefilter pipe to handle the filtering logic.

Create a new file message-filter.pipe.ts:

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

@Pipe({
  name: 'messagefilter'
})
export class MessageFilterPipe implements PipeTransform {
  transform(messages: any[], filterText: string): any[] {
    // Return all messages if filter is empty or no data exists
    if (!messages || !filterText) {
      return messages;
    }

    // Make filtering case-insensitive for better UX
    const lowerFilter = filterText.toLowerCase();

    // Filter messages by matching the username/company property
    return messages.filter(message => {
      // Replace 'username' with your actual data property (e.g., 'company')
      return message.username.toLowerCase().includes(lowerFilter);
    });
  }
}

2. Configure Your Module & Component #

First, make sure you’ve imported the required modules in your feature module (or app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Required for [(ngModel)]
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // For Angular Material

// Import your pipe and component
import { MessageFilterPipe } from './message-filter.pipe';
import { UserMessagesComponent } from './user-messages.component';

// Add Angular Material modules you're using
import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    UserMessagesComponent,
    MessageFilterPipe // Declare the custom pipe here
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatTabsModule,
    MatIconModule
  ],
  bootstrap: [UserMessagesComponent]
})
export class AppModule { }

Then update your component’s TypeScript file (e.g., user-messages.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-messages',
  templateUrl: './user-messages.component.html',
  styleUrls: ['./user-messages.component.css']
})
export class UserMessagesComponent {
  filter: string = ''; // Bound to the search input
  activeMessages: any[] = []; // Your user/message data
  message_id: number | null = null; // Tracks selected message

  // Populate sample data (replace with your actual data source)
  ngOnInit() {
    this.activeMessages = [
      { id: 1, username: 'AliceSmith', mes: 'Project update: Q3 targets met' },
      { id: 2, username: 'BobJohnson', mes: 'New client onboarding docs' },
      { id: 3, username: 'CharlieBrown', mes: 'Team meeting rescheduled' }
    ];
  }

  showMessage(message: any) {
    this.message_id = message.id;
    // Add your logic to display message details here
    console.log('Selected message:', message);
  }
}

3. Finalize Your HTML Template #

Here’s the polished version of your template with missing parts fixed:

<mat-tab label="Active">
  <!-- Fix icon association for accessibility -->
  <mat-icon id="search-icon">search</mat-icon>
  <input 
    type="search" 
    [(ngModel)]="filter" 
    name="search" 
    class="search" 
    placeholder="Username/Company"
    aria-labelledby="search-icon"
  >

  <ul>
    <li 
      *ngFor="let message of activeMessages | messagefilter: filter" 
      (click)="showMessage(message)" 
      [class.activeShow]="message.id == message_id"
    >
      <span class="username">{{ message.username }}</span>
      <span class="message-content">{{ message.mes }}</span>
    </li>
  </ul>
</mat-tab>

4. Optional: Add Styling for Better UX #

Add this CSS to your component’s stylesheet to improve the look and feel:

.search {
  padding: 8px 12px 8px 32px;
  margin: 16px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

#search-icon {
  position: absolute;
  left: 24px;
  top: 28px;
  color: #666;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

li:hover, li.activeShow {
  background-color: #f5f5f5;
}

.username {
  font-weight: 500;
  margin-right: 8px;
}

.message-content {
  color: #666;
}

Quick Tips: #

• Adjust the property name in the pipe (message.username) to match your actual data structure (use message.company if filtering by company name).
• If your data comes from an API, move the data fetch logic to a service and subscribe to it in the component’s ngOnInit.
• For large datasets, consider adding debouncing to the search input to avoid excessive filter runs.

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