Sorting 角度2管道：在单个ngFor中对两个不同阵列使用相同的管道

以下是一个JSON数据：

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

我在UI上的一个表中填充这些数据，该表的列名分别为word、frequency和count。正在使用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>

下面是管道实现：

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

导出类TagFrequencySorter实现PipeTransform{
变换（标记频率：任意，键：字符串，方向：数字）：任意[]{
如果（键！=''&&tagFrequencies！==null）{
console.log（键）
标记频率。排序(
（a:任何，b:任何）=>{
让propertyA:number | string=this.getProperty（a，key）；
让propertyB:number | string=this.getProperty（b，key）；
如果（属性a<属性b）{
返回-1*方向；
}else if（propertyA>propertyB）{
返回1*方向；
}否则{
返回0；
}
}
);
}
返回频率；
}
私有getProperty（值：{[key:string]：any}，key:string）：number | string{
如果（值===null | |值的类型！=='object'）{
返回未定义；
}
let keys:string[]=key.split（'.'）；
let result:any=值[keys.shift（）]；
for（让newkey代替keys）{
如果（结果===null）{
返回未定义；
}
结果=结果[newkey]；
}
返回结果；
}
}

---

有人能帮我解决这个问题吗？

实现这一点的一种方法是通过将自定义管道作为提供程序传递给组件来预处理标记名数组

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>

{{frequency.value}}
{{processedTagNames[i]}
{{frequency.count}

有关Angular2中管道依赖项注入的更多信息，请参见此

---

另一种选择是使用单独的管道组合在一起，然后修改现有的排序管道以处理合并的阵列：

<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>

{{item.frequency.value}
{{item.tagName}
{{item.frequency.count}

感谢您的回复。我使用了第一种预处理tagNmaes的方法。但是如何使用头名称上的onClick（）调用这个processedName方法呢。我想在各自的标题名上使用onClick进行排序，就像我对其他两个标题所做的那样。请参阅上面我更新的HTML代码。在这种情况下，选择合并选项似乎是最简单的选择

<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>