Angular 4中基于数组值实现搜索过滤的技术求助

Hey there! Let's work through this search bar logic together—no stress, we'll break it down step by step so you can get your search up and running.

第一步：准备组件基础结构 #

首先，在你的Angular组件里，我们需要先定义原始数据、搜索关键词变量，还有用来存储过滤结果的变量。另外，别忘了在模块里导入FormsModule（因为我们要用到双向数据绑定）。

// 组件的.ts文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-trip-search',
  templateUrl: './trip-search.component.html'
})
export class TripSearchComponent {
  // 你的原始trip数据
  trips = {
    "20180201": [
      {
        "journeyId": 1001,
        "Number": "001",
        "DriverName": "Alex",
        "Transporter": {
          "id": "T1",
          "number": "AN01001",
          "Company": "Tranzient"
        },
        "place": [
          { "id": 001, "value": "Washington DC" },
          { "id": 002, "value": "Canberra" }
        ]
      },
      {
        "journeyId": 1002,
        "Number": "002",
        "DriverName": "Bob",
        "Transporter": {
          "id": "T2",
          "number": "AN01002",
          "Company": "FastMove"
        },
        "place": [
          { "id": 003, "value": "London" },
          { "id": 004, "value": "Paris" }
        ]
      }
    ]
  };

  searchTerm: string = '';
  filteredJourneys: any[] = [];

  // 过滤函数
  filterTrips() {
    if (!this.searchTerm.trim()) {
      // 如果搜索框为空，清空结果或者返回所有数据，看你需求
      this.filteredJourneys = [];
      return;
    }

    const lowerCaseTerm = this.searchTerm.toLowerCase();
    this.filteredJourneys = [];

    // 遍历所有日期对应的journey数组
    Object.values(this.trips).forEach(journeyArray => {
      // 遍历每个journey
      journeyArray.forEach((journey: any) => {
        // 检查多个字段是否匹配：司机姓名、运输公司、出发/到达地
        const matchesDriver = journey.DriverName.toLowerCase().includes(lowerCaseTerm);
        const matchesCompany = journey.Transporter.Company.toLowerCase().includes(lowerCaseTerm);
        const matchesPlace = journey.place.some((p: any) => p.value.toLowerCase().includes(lowerCaseTerm));

        if (matchesDriver || matchesCompany || matchesPlace) {
          this.filteredJourneys.push(journey);
        }
      });
    });
  }
}

第二步：编写模板（HTML） #

接下来在组件的HTML里，我们添加搜索输入框，绑定搜索关键词，并且显示过滤后的结果：

<!-- 组件的.html文件 -->
<div class="search-container">
  <input 
    type="text" 
    [(ngModel)]="searchTerm" 
    (input)="filterTrips()" 
    placeholder="搜索司机、地点或运输公司..."
  >
</div>

<div class="results-container" *ngIf="filteredJourneys.length > 0">
  <h3>搜索结果</h3>
  <div *ngFor="let journey of filteredJourneys" class="journey-card">
    <p><strong>行程ID:</strong> {{ journey.journeyId }}</p>
    <p><strong>司机:</strong> {{ journey.DriverName }}</p>
    <p><strong>运输公司:</strong> {{ journey.Transporter.Company }}</p>
    <p><strong>途经地点:</strong> {{ journey.place.map(p => p.value).join(', ') }}</p>
  </div>
</div>

<p *ngIf="searchTerm && filteredJourneys.length === 0">没有找到匹配的行程</p>

关键逻辑说明 #

• 双向绑定：[(ngModel)]="searchTerm"让输入框的内容和组件里的searchTerm变量实时同步。
• 实时过滤：(input)="filterTrips()"确保每次输入内容变化时，都会触发过滤函数。
• 多字段匹配：我们检查了司机姓名、运输公司，还有place数组里的每个地点值——只要其中一个字段包含搜索关键词，就把这个行程加入结果列表。
• 大小写不敏感：把搜索关键词和所有字段都转成小写，这样用户输入"alex"或者"Alex"都能匹配到结果。

别忘了导入FormsModule！ #

在你的模块文件（比如AppModule）里，一定要导入FormsModule，否则ngModel会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项...
    FormsModule
  ],
  // 其他模块配置...
})
export class AppModule { }

这样你的搜索栏就能正常工作啦！如果需要扩展搜索字段（比如行程编号），只要在过滤函数里加对应的判断条件就行。

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