如何过滤角2中的其他数组内的项目数组？

Question

即时做和角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; 
}