gpt4 book ai didi

javascript - Angular:如何根据过滤器设置隐藏和显示产品

转载 作者:行者123 更新时间:2023-12-01 03:40:10 26 4
gpt4 key购买 nike

如何在所有 data-* 属性与过滤器都不匹配时隐藏产品,并在列表中产品的一个 data-* 属性与过滤器之一匹配时显示产品.

类别 - 3 个不同的类别(选项、类别和颜色)

options = ['All','OptionA', 'OptionB', 'OptionC', 'OptionD'];
categories= ['All','CategoryA', 'CategoryB', 'CategoryC', 'CategoryD'];
colors = ['All','Green', 'Red', 'Blue', 'Pink'];

<div class="container optionContainer">
<div class="option"
*ngFor="let option of options; let i = index"
(click)="toggleOption(i)"
[ngClass]="{'selected': optionDiv === i }">
<span></span>
<a>{{ option }}</a>
</div>
</div>

产品 - (在项目中,我将从数据库中提取所有产品,并以 *ngFor 显示)。以 JSON 格式发送的产品。

<div class="box" data-option="OptionA" data-category="CategoryC" data-color="Pink">
OptionA CategoryC <br/> Pink
</div>

示例:Plunker

最佳答案

<input type = "text" [ngFormControl]="filterValue"/>
//...
//... component
filterValue = new Control();
ngOnInit(){
this.filterValue.valueChanges
.subscribe(filterValue => this.xxxService.getDataFromDb(filterValue)
.subscribe(data => this.options = data) );

}
//...

find data by filterValue in ther xxxService

抱歉。看来我没听懂你的问题。我的英语很差。我以为你想从数据库中过滤数据。

如果你想写一个管道,你可以这样做。

import {Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'productFilter'})
export class ProductFilterPipe implements PipeTransform{
transform(options: any, option?: any /* your selected option */) {
//... if option mached return at list one data-* else return null
}
}

导入到您的组件并像“...options | ProductFilter: option”一样使用它

我写了一个简单的例子

管道

import {Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'textFilter'})
export class TextFilterPipe implements PipeTransform{
transform(value: Array<string>, text?: string) {
const _value: Array<string> = [];
if (text) {
for (const str of value){
if (str.includes(text)) {
_value.push(str);
}
}
return _value;
}
return value;
}

}

组件

//... templete
<p>{{fruits | textFilter: "p"}}</p>
//...
fruits: Array<string> = [];
ngOnInit() {
this.fruits = [ 'apple', 'orange', 'banana' ];
}

结果:苹果

关于javascript - Angular:如何根据过滤器设置隐藏和显示产品,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43954680/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com