Question

我正在使用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>

Answer 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的事件会尝试进行表单提交操作。

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

1 个答案: