Angular 6实现点击按钮触发列表搜索的方法

我来帮你搞定这个问题！现在你的搜索在输入过程中自动触发，核心原因是输入框绑定了(input)事件，咱们一步步调整成点击按钮才触发，同时还优化一下数据处理逻辑避免原始数据丢失：

第一步：修改模板代码，移除输入时触发的事件 #

当前你的输入框绑定了(input)="searchFilter()"，这就是输入时自动执行搜索的根源。咱们只保留按钮的点击事件即可：

<li class="prop">
  <input type="text" class="input input_button" [(ngModel)]="address" placeholder="Search by location">
  <button type="submit" class="btn_search input_button" style="border:none;height:30px" (click)="searchFilter()">
    <i class="fa fa-search"></i>
  </button>
</li>

第二步：优化组件逻辑，保留原始数据副本 #

你当前的searchFilter方法直接修改this.homes，会导致原始数据丢失，清空搜索词时调用ngOnInit()虽然能重置，但不够优雅。咱们添加一个原始数据副本，每次过滤都基于原始数据操作：

修改后的组件代码： #

import { Component, OnInit } from '@angular/core';
import { Home } from '../../models/IHome.model';
@Component({
  selector: 'app-search',
  templateUrl: './homes.component.html',
  styleUrls: ['./homes.component.css']
})
export class HomesComponent implements OnInit {
  defaultSelection = 'All';
  searchText: any;
  address: string;
  homes: Home[];
  originalHomes: Home[]; // 新增：保存原始数据副本
  filterArgs: any = { type: '', address: '', car_type: '', amenity: '' };
  constructor() { }
  ngOnInit() {
    // 先初始化原始数据
    this.originalHomes = [
      { 'id': 1, 'type': 'Villa', 'price': 920000, 'address': 'CMC', 'area': 6292, 'bedrooms': 2, 'bathrooms': 2, 'car_type': 'Cars', 'park_spots': 1, 'amenity': 'Gym', 'homeUrl': '../../assets/ezembil10.jpg' },
      { 'id': 2, 'type': 'Apartment', 'price': 3000, 'address': 'Summit', 'area': 921, 'bedrooms': 3, 'bathrooms': 1, 'car_type': 'Cars', 'park_spots': 2, 'amenity': 'Wifi', 'homeUrl': '../../assets/ezembil6.jpg' },
      { 'id': 3, 'type': 'Villa', 'price': 820000, 'address': 'Hayat', 'area': 4921, 'bedrooms': 2, 'bathrooms': 2, 'car_type': 'Trucks', 'park_spots': 3, 'amenity': 'Garden', 'homeUrl': '../../assets/ezembil8.jpg' },
      { 'id': 4, 'type': 'Apartment', 'price': 420000, 'address': 'Sarbet', 'area': 3921, 'bedrooms': 2, 'bathrooms': 3, 'car_type': 'Cars', 'park_spots': 4, 'amenity': 'Swimming Pool', 'homeUrl': '../../assets/ezembil1.jpg' },
      { 'id': 5, 'type': 'Villa', 'price': 629000, 'address': 'Mekhanisa', 'area': 2921, 'bedrooms': 1, 'bathrooms': 1, 'car_type': 'Vans', 'park_spots': 1, 'amenity': 'Gym', 'homeUrl': '../../assets/ezembil6.jpg' },
      { 'id': 6, 'type': 'Apartment', 'price': 720000, 'address': 'Bole', 'area': 1921, 'bedrooms': 3, 'bathrooms': 3, 'car_type': 'Bikes', 'park_spots': 1, 'amenity': 'Gym', 'homeUrl': '../../assets/ezembil5.jpg' }
    ];
    // 初始化显示全部数据
    this.homes = [...this.originalHomes];
  }
  searchList(row: any) {
    if (this.searchText) {
      const propVal = row[this.searchText.toLowerCase()] + '';
      if (propVal) {
        return propVal.toUpperCase().indexOf(this.searchText.toUpperCase()) > -1;
      } else {
        return false;
      }
    }
    return true;
  }
  searchFilter() {
    // 处理空输入或全空格的情况
    const searchValue = this.address?.trim();
    if (searchValue) {
      // 基于原始数据过滤
      this.homes = this.originalHomes.filter(res => {
        return res.address.toLowerCase().includes(searchValue.toLowerCase());
      });
    } else {
      // 清空搜索词时恢复全部数据
      this.homes = [...this.originalHomes];
    }
  }
}

关键调整说明： #

• 移除输入框的(input)事件：这样只有点击搜索按钮时才会执行searchFilter方法
• 新增originalHomes数组：保存原始的房源数据，避免过滤后原始数据丢失，不用重复调用ngOnInit()重置
• 用trim()处理输入值：防止用户输入空格时误触发无效过滤
• 替换match为includes：字符串匹配更直观，功能和之前一致但可读性更好

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