如何在角度2中过滤包含其他数组的项目数组？

Question

我正在使用材料设计应用程序和 Angular 2。此应用程序是一个集换式卡牌游戏数据库，用户可以在其中搜索卡牌。到目前为止，数据库是本地的，带有 json 文件。问题是我有一个输入，用户在其中写入卡片的“种族”，并且应该将图像网格过滤到共享该种族的卡片。

卡片类是这样的：

export class Card {
  name: string;
  attribute: string;
  type: string;
  racesOrTraits: string[];
  text: string;
  set: string;
  code: string;
  rarity: string;
  thumbnailImage: string;
  cardImage: string;
}

我有两个页面组件，一个是要过滤的卡片列表，另一个是带有 sidenav 输入的容器。

网格模板为：

<div class="card-grid">
  <md-grid-list cols="4" rowHeight="500px" gutterSize="1em">
    <md-grid-tile *ngFor="let card of cards | searchFilter:searchedName | raceFilter:searchedRace " md-cols="4">
      <img src="{{card.thumbnailImage}}">
    </md-grid-tile>
  </md-grid-list>
</div>

容器模板是这样的：

<md-sidenav-container>
  <md-sidenav #sidenav id="right-sidenav">
    <!-- sidenav content -->
    <p>Search:</p>
    <md-input-container>
      <input mdInput placeholder="Card Name" [ngModel]="searchedName" (ngModelChange)="searchedName=$event">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Race" [ngModel]="searchedRace" (ngModelChange)="searchedRace=$event">
    </md-input-container>
  </md-sidenav>
  <!-- primary content -->
  <div class="content">
    <card-list [searchedName]="searchedName" [searchedRace]="searchedRace"></card-list>
  </div>
</md-sidenav-container>

正如您在网格模板中看到的那样，我创建了两个过滤卡片的管道，名称的管道工作正常，所以当我更改名称中的值时，输入卡片过滤器就可以了。

但是每张卡的种族数组管道工作不正常。它过滤带有 EXACT 种族的卡片，而不是包含输入的种族。例如，如果有一些带有种族的牌：“圆桌骑士”，而我在输入中写了“骑士”，则什么都不会出现。我不知道如何构建这个管道来像另一个一样工作。

名称管道是：

@Pipe({
  name: 'searchFilter',
  pure: false
})
@Injectable()
export class SearchByNamePipe implements PipeTransform {
  transform(items: any[], name: any): any {
    if (name != undefined) {
      // filter items array, items which match and return true will be kept, false will be filtered out
      return items.filter(item => item.name.toLowerCase().indexOf(name.toLowerCase()) !== -1);
    }
    return items;
  }
}

比赛管道是：

@Pipe({
  name: 'raceFilter',
  pure: false
})
@Injectable()
export class SearchByRacePipe implements PipeTransform {
  transform(items: any[], race: any): any {
    if (race != undefined) {
      // filter items array, items which match and return true will be kept, false will be filtered out
      return items.filter(item => item.racesOrTraits.map(function (r: string) {
        return r.toLowerCase();
      }).includes(race.toLowerCase()));
    }
    return items;
  }
}

希望我自己解释一下。提前致谢

Answer 1

您应该从 raceOrTraits 过滤它，如下所示

transform(items: any[], race: any): any {
    let filteredItems : any[] = new Array();
    if (race != undefined) {
      // filter items array, items which match and return true will be kept, false will be filtered out
        items.forEach((card)={
            card.forEach((item)=> {
                let temp= item.racesOrTraits.toLowerCase().includes(race.toLowerCase());
                if(temp){
                    filteredItems.push(card);
                }
            })

        })
     return filteredItems;
}