选择与ngfor - 链接管道中的不同值

Question

我已经做了一个管道（搜索）过滤结果，但我想要第二个管道或其他方式来过滤选项中的搜索值并仅显示一次值。

我需要的是动态搜索 - 选择具有唯一（不同）值的选项菜单。

问题：

HTML：

<!-- Search form -->
<mat-form-field>
    <mat-select [(value)]="category" placeholder="Categories" [formControl]="panelMargin" panelClass="example-panel">
      <mat-option>None</mat-option>          
      <mat-option value="{{p.category}}" *ngFor="let p of resultCollection| FilterPipe:category:platform">{{p.category}}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-select [(value)]="platform" placeholder="Program Languages" [formControl]="panelMargin" panelClass="example-panel">
      <mat-option>None</mat-option>

      <mat-option value="{{p.platform}}" *ngFor="let p of resultCollection | FilterPipe:category:platform">{{p.platform}}</mat-option>
    </mat-select>
  </mat-form-field>

  <!-- Results -->
  <div id="pr-result" class="section-block">
<table class="table table-striped table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Platform</th>
      <th>Logo</th>
      <th>Link</th>
      <th>Desc</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let r of resultCollection | FilterPipe:category:platform">
      <td>{{r.name}}</td>
      <td>{{r.category}}</td>
      <td>{{r.platform}}</td>
      <td>{{r.logo}}</td>
      <td>{{r.link}}</td>
      <td>{{r.desc}}</td>
    </tr>
  </tbody>
</table>

零件：

export class Mydata{
  id: number;
  name:string;
  category: string;
  platform: string;
  logo: string;
  link: string;
  desc: string;
}

export class PortfolioGrComponent implements OnInit {       
   private resultCollection = new Array<Mydata>();
   constructor() { 
this.resultCollection = this.generateResults();
}

generateResults():Mydata[]{
    return [
      {
        id:1,
        name: "i-tech",
        category: "e-shop",
        platform: "Laravel",
        logo: "1",
        link: "1",
        desc: "1"
      },
      ...
    ];
   }
}

过滤管：

export class FilterPipe implements PipeTransform {

  transform(_initialCollection: Mydata[], _category: string, _platform:string): Mydata[] {
    let results = new Array<Mydata>();

      _initialCollection.forEach((person,index,collection) => {
        if(_category === null && _platform === null){
            // console.log(prname);
            return results.push(person);
        }
        if(_category && _platform){
            if( person.category.toLowerCase().includes(_category.toLowerCase()) && person.platform.toLowerCase().includes(_platform.toLowerCase()) ){
              results.push(person);
            }
        }
        else if(_category){
            if( person.category.toLowerCase().includes(_category.toLowerCase()) ){
              results.push(person);
            }
        }
        else if(_platform){
            if( person.platform.toLowerCase().includes(_platform.toLowerCase()) ){
              results.push(person);
            }
        }       
      }); 
    return results;
  }
}

如您所见，我的结果与我的搜索相关联。我想要做的是创建一个动态搜索并显示可用的选择，具体取决于我的结果;就像电子商店的多重搜索过滤器一样。

我正在为我的搜索选项表单考虑第二个过滤管道，但我不知道是否可能，我没有找到一个类似的例子来帮助我。

如何解决这个问题以及哪种方式更合适？如果您需要更多细节，请随时问我。

我想删除重复的项目。修复日期似乎不正确，因为在我的代码中我没有任何日期可以转换。

Answer 1

您可以选择两种方式：

First

正如官方文件所说，你可以链接管道：https://angular.io/guide/pipes#chaining-pipes

然后在您的模板代码中看起来像：

<mat-option value="{{p.platform}}" *ngFor="let p of resultCollection | FilterPipe:category:platform | anotherPipe">{{p.platform}}</mat-option>

Second

您还可以做的是在管道类中创建另一个方法，该方法将检查重复项并将结果推送到results数组。

export class FilterPipe implements PipeTransform {

  transform(_initialCollection: Mydata[], _category: string, _platform:string): Mydata[] {
    let results = new Array<Mydata>();

      _initialCollection.forEach((person,index,collection) => {
        if(_category === null && _platform === null){
            // console.log(prname);
            return results.push(person);
        }
        if(_category && _platform){
            if( person.category.toLowerCase().includes(_category.toLowerCase()) && person.platform.toLowerCase().includes(_platform.toLowerCase()) ){
              results.push(person);
            }
        }
        else if(_category){
            if( person.category.toLowerCase().includes(_category.toLowerCase()) ){
              results.push(person);
            }
        }
        else if(_platform){
            if( person.platform.toLowerCase().includes(_platform.toLowerCase()) ){
              results.push(person);
            }
        }       
      }); 
    return results;
  }

  private pushToResults(item:MyData):void {
    if (results.indexOf(item) > -1) //or any other conditional/check
      results.push(person)
  }
}

Answer 2

解决方案是创建另一个管道并过滤结果，如下所示：

HTML：

<mat-form-field>
        <mat-select [(value)]="category" placeholder="Categories" [formControl]="panelMargin" panelClass="example-panel">
          <mat-option>None</mat-option>
          <mat-option value="{{p.category}}" *ngFor="let p of resultCollection | FilterPipe:category:platform | uniqueCategory:category">{{p.category}}</mat-option>
        </mat-select>
      </mat-form-field>

独特-category.pipe.ts：

export class UniqueCategoryPipe implements PipeTransform {

  transform(_initialCollection: Mydata[], _category: string): Mydata[] {
      let results = new Array<Mydata>();

      _initialCollection.forEach((product,index,collection) => {
        if(_category === null || _category){            
             if(collection.map(product => product.category).indexOf(product.category) === index){
                return results.push(product);
             }
        }               
      }); 
        return results;   
  }
}