角形通用管道

Question

我想写泛型pipe。这是pipe我为数据类型编写的地方Category

order-by-category.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Category } from '../../models/Category';
import { sortBy } from 'lodash';


@Pipe({
  name: 'orderByCategory',
})
export class OrderByCategoryPipe implements PipeTransform {
  transform(value: Category[]): Category[] {
    return sortBy(value, (o: Category) => { return o.name; });
  }
}

.html

 <ion-item *ngFor="let c of categorySortedList | orderByCategory">
      <ion-label>{{c.name }}</ion-label>
      <ion-radio [value]="c.id" (ionSelect)="selectedCategory(c)"></ion-radio>
 </ion-item>

现在我需要编写相同类型的pipe. 但data type情况不同。

现在是这样的：

 transform(value: BudgetGroup[]): BudgetGroup[] {
    return sortBy(value, (o: BudgetGroup) => { return o.name; });
  }

所以我想在这里使用通用解决方案而不是相同类型的 2 pipes，而且我也需要维护Typed pipe。

Answer 1

我只是在写同样的内容并找到了你的问题。答案很明显 - 通用函数将起作用：

@Pipe({
  name: 'orderByName',
})
export class OrderByNamePipe implements PipeTransform {
  transform<T extends {name: string}>(value: T[]): T[] {
    return value.sort((a, b) => {
      if (a.name > b.name) return -1;
      if (a.name < b.name) return 1;
      return 0;
    });
  }
}

原始类型保留并在模板中查看

Answer 2

试图用代码来澄清@Rob 已经指出的内容。您可以概括管道的transform()方法以符合具有强制“名称”的特定类型，如下所示。

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

export interface NameModelForPipe {
 name: string; // forces the 'name' property
 [key: string]: any; // allows for basically another property of 'any' type
}

@Pipe({
  name: 'orderByNameModel',
})
export class OrderByNameModelPipe implements PipeTransform {
  transform(value: NameModelForPipe[]): NameModelForPipe[] {
    return sortBy(value, (o: NameModelForPipe) => { return o.name; });
  }
}

如果您不想显式声明接口，则可以内联指定它，

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


@Pipe({
  name: 'orderByNameModel',
})
export class OrderByNameModelPipe implements PipeTransform {
  transform(value: { name: string; [key: string]: any; }[]): { name: string; [key: string]: any; }[] {
    return sortBy(value, (o: { name: string; [key: string]: any; }) => { return o.name; });
  }
}