角2管：在單一使用兩個不同的陣列相同的管ngFor

Question

以下爲JSON數據：

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

我填充此數據上的UI在一個表具有用於上述的列名字，頻率JSON對象的屬性值和計數分別。使用tagId屬性使用GET API調用提取第三列標記名稱。以下是我的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>