Question

当所有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

Answer 1

<note>
 <to>Tove</to>
 <from>Jani</from>
 <age>50</age>
</note>
通过xxxService中的filterValue查找数据

对不起。我似乎没有解开你的问题。我的英语很差。我以为你想从db。过滤数据。

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

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

}
//...

导入您的组件并像“... options | productFilter：option”

一样使用它

我写了一个简单的例子

管

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 
  }
}

成分</ P>

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;
 }

}

结果：苹果

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

1 个答案: