Anuglar2 管道 - 使用来自组件的属性进行过滤

Question

我在通过管道访问组件中的属性时遇到问题。

这是我的烟斗：

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

@Pipe({
  name: 'unitEquipment'
})
export class UnitEquipmentPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (value == null) {
       return null;
     }
     let resultArray = [];
     for (let item of value) {
       if(item.equip_type === "dagger" && args[0].dagger == true){
         resultArray.push(item);
       }
       if(item.equip_type === "katana" && args[0].katana == true){
         resultArray.push(item);
       }
     }
     return resultArray;
  }

}

这是我在使用过滤器时试图在 HTML 中访问的组件中的对象：

  unit = {
    "dagger": true,
    "sword": false,
    "great_sword": false,
    "katana": true
  };

这是我要过滤的数组，也在我的组件中：

  rhandequip = [
    {
      "name": "Hidden Truth",
      "equip_name": "hidden-truth",
      "equip_type": "great_sword"
    },
    {
      "name": "Mursama",
      "equip_name": "mursama",
      "equip_type": "katana"
    },
    {
      "name": "Battle Dagger",
      "equip_name": "battle-dagger",
      "equip_type": "dagger"
    },
    {
      "name": "Boomer",
      "equip_name": "boomer",
      "equip_type": "sword"
    },
    {
      "name": "Broadsword",
      "equip_name": "broadsword",
      "equip_type": "sword"
    },
    {
      "name": "Bronze Knife",
      "equip_name": "bronze-knife",
      "equip_type": "dagger"
    }
  ]

最后 HTML:

  <select class="form-control" [(ngModel)]="rHandSelect" name="emptyRightHand" #righthand (input)="getRHand(righthand.value)">
    <option value="Empty">Empty</option>
    <option *ngFor="let rhand of rhandequip | unitEquipment: 'unit'" value="{{rhand.equip_name}}">{{rhand.name}} &#x25B6; {{rhand.info}}</option>
  </select>

基本上，当我 select 一个单元时，我会尝试 return 我数组中的所有对象 equip_type 该单元已列为 true。 item.equip_type === "dagger" 和 item.equip_type === "katana" 部分在我的 IF 语句中起作用，但是 args[0].dagger == true 和 && args[0].katana == true 似乎不起作用。无法弄清楚我做错了什么。我也试过 'unit' 带引号和不带引号，运气不好。

Answer 1

您正在将字符串作为参数 unitEquipment: 'unit' 提供给您的管道。

应该是unitEquipment: unit.

在你的管道里面，像这样使用它args.dagger。

Anuglar2 管道 - 使用来自组件的属性进行过滤

Anuglar2 Pipe - Filtering using Property from Component

angular2-pipe

angular

Anuglar2 管道 - 使用来自组件的 属性 进行过滤

Anuglar2 Pipe - Filtering using Property from Component

angular2-pipe

angular

Anuglar2 管道 - 使用来自组件的属性进行过滤