オブジェクト内の配列値の2つの選択フィルタ

Bwizard：

私は、以下のデータオブジェクトを持っています：

goods = [
    { name: 'Canon', title: 'Canon EOS 5D Mark III Body', tags: ['tag1','tag2','tag3']},
    { name: 'Nikon', title: 'Nikon D3100', tags: ['tag1','tag4','tag5']},
    { name: 'Sony', title: 'Sony CX700', tags: ['tag2','tag3','tag6']},
    { name: 'Fujifilm', title: 'Fujifilm XT20',tags: ['tag1','tag4','tag5']},       
  { name: 'Sony', title: 'Sony CX500', tags: ['tag3','tag4','tag5']},
  { name: 'Nikon', title: 'Nikon D750', tags: ['tag1','tag5','tag6']},
];

そして、2つのセレクトボックスでhtmlページ。

<select [(ngModel)]="selectedTag1" (change)="valueSelected1()">
 <option  *ngFor="let item of tagName">{{ item }}</option>
</select>

<select [(ngModel)]="selectedTag2" (change)="valueSelected2()">
 <option  *ngFor="let item of tagName">{{ item }}</option>
</select>

<div *ngFor="let item of goods">
 <app-goods [goodsData]="item"></app-goods>
</div>

私のTSファイルでは、私はselectedTag1、selectedTag2または両方のタグ配列をフィルタリングしたいと思います。私は、配列をフィルタリングする（私はそれをループする必要がありますか？）と私は2つのフィルター結合する方法がわからないかわからない（私はRXJSからcombineLatestが必要なのでしょうか？）。私は今のところ、以下の持っています

  ngOnInit() {
   this.tagName = this.dropdownService.brandName;
   this.goods = this.goodsService.goods;
  };

  public valueSelected1() {
   this.goods = this.goodsService.goods.filter(item => item.tags[0] === this.selectedTag1);
   console.log(this.selectedTag1);
  }
  public valueSelected2() {
   this.goods = this.goodsService.goods.filter(item => item.tags[0] === this.selectedTag1);
   console.log(this.selectedTag2);
  }

私はここに、配列をループする必要があると思うitem.tags[0]...確かにそれを行うと、その後combineLatestを行うための最善の方法ではなく、そうでないかもしれませんか？私が作成したstackBlitz

fristys：

あなたはいくつかの方法多くの数のいずれかでこれを行うことができます。

ゲッターと

get goodsFiltered(): any[] {
   return this.goods?.filter(({ tags }) => tags.indexOf(this.selectedTag1) !== -1 && tags.indexOf(this.selectedTag2) !== -1) ?? [];
}

カスタムパイプ （最良の方法の私見）

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

@Pipe({ name: 'filteredGoods' })
export class FilteredGoodsPipe implements PipeTransform {
  transform(goods: any[], { tag1, tag2 }): any[] {
    return goods.filter(({ tags }) => tags.indexOf(tag1) !== -1 && tags.indexOf(tag2) !== -1);
  }
}

<div *ngFor="let item of goods | filteredGoods: { tag1: selectedTag1, tag2: selectedTag2 }">
 <app-goods [goodsData]="item"></app-goods>
</div>

直接でchangeイベントコールバック：

  public valueSelected1() {
   this.goods = this.goods.filter(({ tags }) => tags.indexOf(this.selectedTag1) !== -1 && tags.indexOf(this.selectedTag2) !== -1);
  }
  public valueSelected2() {
   this.goods = this.goods.filter(({ tags }) => tags.indexOf(this.selectedTag1) !== -1 && tags.indexOf(this.selectedTag2) !== -1);
  }

お役に立てれば：）

編集：私が持っているどのような種類のもの言うことはできませんが、あればthis.goodsService.goodsあるObservable、あなたはパイプべきフィルタ演算子を：

ngOnInit() {
   this.tagName = this.dropdownService.brandName;
   this.goods = this.goodsService.goods.pipe(
      filter(({ tags }) => tags.indexOf(this.selectedTag1) !== -1 && tags.indexOf(this.selectedTag2) !== -1)
   );
  }

オブジェクト内の配列値の2つの選択フィルタ

おすすめ