如何使用 Angular 在按鈕（單擊）上的列表中執行搜索？
[英]How can I perform a search on a list on button (click) using Angular?
問題描述
我正在使用 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> {{ home.address }}</label><br> <label><i class="fa fa-money fa-fw" aria-hidden="true"></i> {{ home.price | currency:'USD':'symbol' : '1.0'}}</label> </div> <hr> <button class="details"><i class="fa fa-tag fa-fw" aria-hidden="true"></i> {{ home.type }}</button> <label> SqFt:{{ home.area }}</label><br> </div> </ng-container> </div> <pagination-controls (pageChange)="p= $event" style="float:right"></pagination-controls> </section>
1 個解決方案
解決方案1
1 已采納 2019-05-09 12:30:17
<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，按鈕沒有默認行為。 它可以具有與元素事件相關聯的客戶端腳本，這些事件在事件發生時被觸發，而對於submit類型，它會嘗試進行表單提交操作。
如何使用 Angular 8 將按鈕單擊時的數據從一個組件傳遞到另一個組件？
[英]How can I pass data on button click from one component to another using Angular 8?
在Angular 2中，如何在單擊按鈕時將注意力集中在div的底部
[英]In Angular 2, how can I focus to the bottom of a div on button click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.