Question

即时通讯和角度2与材料设计应用。该应用程序是交易卡游戏数据库，用户可以在其中搜索卡片。到目前为止，数据库是json文件的本地数据库。问题是我有一个输入，用户在那里写'＆＃34; race＆＃34;卡片和它的图像网格过滤到共享该种族的卡片。

卡片类是这样的：

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比赛过滤卡片而不是包含输入的比赛。例如，如果有一些比赛的牌：＆＃34;圆桌骑士＆＃34;我写了＃34; Knight＆＃34;在输入中，没有任何内容出现。我不知道如何构建这个管道作为另一个管道。

名称管道是：

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

如何使用角度2中的其他数组过滤项目数组？

1 个答案: