角型一般パイプ

Question

pipeという汎用品を書きたいと思います。ここで手伝ってもらえますか？

は、これは私がデータ型のために書かれているpipeあるCategory

オーダーバイ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

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