如何使用 Angular 对按钮（单击）上的列表执行搜索？答案

【问题标题】：How can I perform a search on a list on button (click) using Angular?如何使用 Angular 对按钮（单击）上的列表执行搜索？
【发布时间】：2019-05-09 12:23:58
【问题描述】：

我正在使用 Angular 6 对我的列表进行搜索。现在，当我在输入搜索框中键入一些文本时，我拥有的代码可以正确搜索。但是，我希望在单击按钮后执行搜索。我怎样才能做到这一点？

我希望过滤器在单击按钮后起作用，而不是在输入输入字段时起作用。

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[];
  filterArgs: any = { type: '', address: '', car_type: '', amenity: '' };

 

  constructor() {  }

  ngOnInit() {
  

    this.homes = [
      {
        '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'
      }
    ];

  }

  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() {
    /* this.searchList = this.searchText; */
    if (this.address !== '') {
      this.homes = this.homes.filter(res => {
        return res.address.toLowerCase().match(this.address.toLowerCase());
      });
    } else if (this.address === '') {
      this.ngOnInit();
    }
  }

}

<!DOCTYPE html>
<div id="showcase">
  <header>
    <nav class='cf'>
      <ul class='cf'>
        <li>
          <a href="#">eZembil</a>
        </li>
        <div class="nav_menu">
          <li>
            <a routerLink="/properties">Properties</a>
          </li>          
          <li class="prop">
            <input type="text" class="input input_button" [(ngModel)]="address" placeholder="Search by location"
              (input)="searchFilter()">
            <button type="submit" class="btn_search input_button" style="border:none;height:30px"
              (click)="searchFilter()">
              <i class="fa fa-search"></i></button>
          </li>
        </div>
      </ul>
      <a href=' #' id='openup'>MENU</a>
    </nav>
  </header>
</div>


<section class="main-content">
  <div class="main">

    <ng-container *ngFor="let home of homes | paginate: { itemsPerPage: 6, currentPage: p }">

      <div class="homes" (click)="openDetails()">
        <img class="homes_content" src="{{ home.homeUrl }}" /><br>
        <div class="labels">
          <label><i class="fa fa-map-marker fa-fw" aria-hidden="true"></i>&nbsp;{{ home.address }}</label><br>
          <label><i class="fa fa-money fa-fw"
              aria-hidden="true"></i>&nbsp;{{ home.price | currency:'USD':'symbol' : '1.0'}}</label>
        </div>
        <hr>
        <button class="details"><i class="fa fa-tag fa-fw" aria-hidden="true"></i>&nbsp;{{ home.type }}</button>
        <label>&nbsp;SqFt:{{ home.area }}</label><br>
      </div>

    </ng-container>



  </div>
  <pagination-controls (pageChange)="p= $event" style="float:right"></pagination-controls>
</section>

【问题讨论】：

模板代码中的输入在哪里？您的样本中似乎缺少它。

标签： angular

【解决方案1】：

<input 
    type="text" 
    class="input input_button" 
    [(ngModel)]="address" 
    placeholder="Search by location"> 

<button 
    type="button" 
    class="btn_search input_button" 
    style="border:none;height:30px" 
    (click)="searchFilter()"> 

    <i class="fa fa-search"></i>
</button>

如果您从输入中删除 (input)="searchFilter()"，您的代码应该只搜索按钮点击。

按钮的类型也应该是“button”：

对于button 类型，按钮没有默认行为。它可以有与元素事件关联的客户端脚本，它们是当事件发生时触发，而类型 submit 它会尝试进行表单提交操作。

【讨论】：

如果我删除 (input)="searchFilter()" 它根本不起作用，没有过滤器被执行
我编辑了，我没有意识到您的类型是按钮上的“提交”。它应该是“按钮”。