angular - 如何使用 Angular 中的切换按钮进行过滤
问题描述
我正在尝试使用 ngFor 显示一些数据。我想使用切换对显示的数据进行过滤。
到目前为止，我已经使过滤器部分工作。目前，当我单击切换时，它确实过滤了我的数据。例如：当我点击切换“健身房”时，它会返回所有有健身健身房的房子。但是当我点击说多个切换时它不会过滤房屋，例如当我点击“健身房”和“Wifi”时它应该返回一个包含便利设施的房屋列表：健身房和 Wifi
我希望过滤器在我点击多个切换按钮时返回一个房屋列表，例如当我点击“健身房”和“Wifi”时它应该返回一个包含便利设施的房屋列表：健身房和 Wifi
我的组件是：
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;
counter = 0;
homes: Home[];
filterArgs: any = { type: '', address: '', car_type: '', amenity: '' };
amenities = [
{
'name': 'Wifi',
'value': false
},
{
'name': 'Gym',
'value': false
},
{
'name': 'Swimming Pool',
'value': false
},
{
'name': 'Garden',
'value': false
}
];
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', 'Swimming Pool'],
'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'
}
];
}
amenityChange(item: any, e: any) {
if (e.srcElement.checked === true) {
console.log('checked');
for (let i = 0; i < this.amenities.length; i++) {
if (this.amenities[i].name === item) {
this.amenities[i].value = true;
}
}
}
if (e.srcElement.checked === false) {
console.log('unchecked');
this.counter = 0;
for (let i = 0; i < this.amenities.length; i++) {
if (this.amenities[i].name === item) {
this.amenities[i].value = false;
}
}
}
for (let j = 0; j < this.amenities.length; j++) {
if (this.amenities[j].value === true) {
this.filterArgs.amenity = this.amenities[j].name;
this.counter = 1;
}
}
if (this.counter === 0) {
this.filterArgs.amenity = '';
}
}
}
我的管道是：
import { Pipe, PipeTransform } from '@angular/core';
import { Home } from '../models/IHome.model';
@Pipe({
name: 'amenitiesFilter',
pure: false
})
export class AmenitiesFilterPipe implements PipeTransform {
transform(values: any[], filter: Home): any {
/* console.log('amenities', values, filter); */
if (!values || !filter || !filter.amenity) {
return values;
}
return values.filter(item => {
return item.amenity.indexOf(filter.amenity) !== -1;
});
}
}
我的模板是：
<p *ngFor="let amenity of amenities">
<label>{{ amenity.name }}</label>
<label class="switch">
<input type="checkbox" id={{amenity.name}} name="amenities" (change)="amenityChange(amenity.name, $event)">
<span class="toggle round"></span>
</label>
</p>
<ng-container *ngFor="let home of homes | amenitiesFilter: filterArgs
| pricerangeFilter: 'price': min:max
| 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>
<pagination-controls (pageChange)="p= $event" style="float:right"></pagination-controls>
解决方案
我改变了一点你的代码..不要使用管道
homes: Home[];
homesFiltered:Home[];
filterArgs: any = { type: '', address: '', car_type: '', amenity: '' };
amenities = [
{
'name': 'Wifi',
'value': false
},
{
'name': 'Gym',
'value': false
},
{
'name': 'Swimming Pool',
'value': false
},
{
'name': 'Garden',
'value': false
}
];
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', 'Swimming Pool'],
'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.homesFiltered=this.homes;
}
amenityChange(amenity) {
amenity.value=!amenity.value;
let filterBy= this.amenities.filter((x)=>x.value==true).map((v)=>{
return v.name;
});
if(filterBy && filterBy.length){
this.homesFiltered=this.homes.filter((x)=>x.amenity.some(r=> filterBy.indexOf(r) >= 0))
}else{
this.homesFiltered=this.homes;
}
}
并在 html 中将复选框更改为：
<input type="checkbox" id={{amenity.name}} [checked]="amenity.value" name="amenities" (change)="amenityChange(amenity)">
推荐阅读
- google-sheets - 如果加粗与谷歌表中的标准相加
- android - 16 位 HID 游戏手柄报告描述符提供了类似于 android 中的 8 位描述符的分辨率
- sql - 如果字段中不存在字符串的一部分，则 MSSQL 显示 null
- linq - 使用 Linq 从列表中索引重复项
- mysql - 如何在 SQL 的 WHERE 子句中使用 IN 运算符和 AND 运算符...？
- python - 为什么我的代码没有产生预期的结果？
- unit-testing - Vue.js - Vuetify - 很难测试菜单组件
- moodle - 如何通过moodle API显示和返回moodle课程内容？
- php - Laravel 自定义错误验证 JSON 响应对象到数组
- javascript - Array.forEach 中的 Node.Js 异步请求在写入 json 文件之前未完成