角度2パイプ2つの異なるアレイに同じ管を使用して、単一ngForで

Question

以下はJSONデータである：

{ 
    "tagFrequency": [ 
    { 
     "value": "At", 
     "count": 1, 
     "tagId": 249 
    }, 
    { 
     "value": "ipsum", 
     "count": 1, 
     "tagId": 251 
    }, 
    { 
     "value": "molestie", 
     "count": 1, 
     "tagId": 199 
    } 
    ] 
} 

Iは、単語としてカラム名を持つテーブルで上記の頻度をUI上にこのデータを移入していJSONオブジェクトの属性値とカウントTagId属性を使用してGET API呼び出しで3列目のタグ名を抽出しています。私のHTMLコードを以下に示します。

<table> 
    <thead> 
    <tr> 
     <th (click)="sort('value')">{{ 'word' | translate }}</th> 
     <th (click)="sort('tagId')">{{ 'tag-name' | translate }}</th> 
     <th (click)="sort('count')">{{ 'frequency' | translate }}</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let frequency of (frequencies | TagFrequencySorter: key: direction); let i = index;"> 
     <td>{{ frequency.value }}</td> 
     <td>{{ processedTagNames[i] }}</td> 
     <td>{{ frequency.count }}</td> 
    </tr> 
    </tbody> 
</table> 

私は「TagFrequencySorter」パイプで作業している、これらの列の値をソートしてカウントします。しかし、同じforループ内の同じパイプを使ってtagNames配列データをソートしたいと思う。私はパイプに必要な変更を加えることができますが、私はこれらの両方の配列を何とかこのパイプに渡すだけです。続き

は、私はコンポーネントで書くソート機能である：

sort(value: string) { 
    this.direction = this.direction * (-1); 
    if(value === "tagId") { 
     this.key = ""; 
    } 
    else { 
     this.key = value; 
    } 
    } 

そしてここでは、パイプの実装です：

export class TagFrequencySorter implements PipeTransform { 
    transform(tagFrequencies: any, key: string, direction: number): any[] { 
    if (key !== '' && tagFrequencies !== null) { 
     console.log(key) 
     tagFrequencies.sort(
     (a: any, b: any) => { 
      let propertyA: number|string = this.getProperty(a, key); 
      let propertyB: number|string = this.getProperty(b, key); 

      if (propertyA < propertyB) { 
      return -1 * direction; 
      } else if (propertyA > propertyB) { 
      return 1 * direction; 
      } else { 
      return 0; 
      } 
     } 
    ); 
    } 
    return tagFrequencies; 
    } 

    private getProperty(value: { [key: string]: any}, key: string): number|string { 
    if (value === null || typeof value !== 'object') { 
     return undefined; 
    } 
    let keys: string[] = key.split('.'); 
    let result: any = value[keys.shift()]; 
    for (let newkey of keys) { 
     if (result === null) { 
     return undefined; 
     } 
     result = result[newkey]; 
    } 
    return result; 
    } 
} 

誰かが私はこの問題を解決するのに役立つことはできますか？これを達成するための

Answer 1

一つの方法は、あなたのコンポーネントにプロバイダとしてカスタムパイプを渡すことによって、あなたのtagNames配列を事前処理することである

constructor(private _tagFrequencySorterPipe: TagFrequencySorter){ } 

get processedTagNames(){ 
    return this._tagFrequencySorterPipe(this.tagNames, this.key, this.direction);  
} 

あなたのHTMLは、次のようになります。

<tr *ngFor="let frequency of (frequencies | TagFrequencySorter: key: direction); let i = index;"> 
    <td>{{ frequency.value }}</td> 
    <td>{{ processedTagNames[i] }}</td> 
    <td>{{ frequency.count }}</td> 
</tr> 

Angular2でのパイプ依存性注入の詳細については、questionを参照してください。

---

別のオプションは、別々のパイプを使用して一緒にmerge the two arraysになり、その後、マージされたアレイ上で動作するように既存の並べ替えパイプを修正することができます：応答のための

<tr *ngFor="let item of (frequencies | merge: tagNames |TagFrequencySorter: key: direction); let i = index;"> 
    <td>{{ item.frequency.value }}</td> 
    <td>{{ item.tagName }}</td> 
    <td>{{ item.frequency.count }}</td> 
</tr>