Question

我想写一般pipe。你能帮助我吗？

这是我为数据类型Category

编写的

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

顺序逐category.ts

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

html的

pipe

现在我需要编写相同类型的data type。但是transform(value: BudgetGroup[]): BudgetGroup[] { return sortBy(value, (o: BudgetGroup) => { return o.name; }); }是不同的。

现在是这样的：

pipes

所以我想在这里使用通用解决方案而不是同一种2 Typed pipe，我也需要维护T=250 x=np.ndarray(len(y),dtype=y.dtype) for i in range(len(y['timestamp'])-1): if y['timestamp'][i+1]-y['timestamp'][i]>T: x[i]=y[i]。希望你能在这里帮忙吗？

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

Answer 2

我只是写了一样，发现了你的问题。答案很明显-泛型函数将起作用：

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

原始类型保留并在模板seen中可见

Answer 3

我在这里提出了一个类似的问题：A way to cast variables in template to multiple types 并且由于我在网上搜索时浏览了这篇文章 10 次，因此我也想在这里发布一个 hacky 解决方案。

<块引用>

我做了以下简单的管道：


@Pipe({   name: 'toType',   pure: true, }) export class ToTypePipe
implements PipeTransform {   transform<T>(value: unknown, _: T): T {
    return value as T;   } }

你可以这样称呼它

value | toType: Animal.DOG

value 可以是 Animal 的任何值，但我们只是将 is 作为其中之一值，所以编译器认为可以使用它，不要抱怨。

这是不安全的，并且有点消除严格模式的目的。

但是，它允许做一些解决方法并进行一些非常简单的转换简单。就像在这种情况下：

[cdkColumnDef]="columns.name.def">   <td class="align-items-center p-4
w-80" cdk-cell *cdkCellDef="let element">  ```

`*cdkCellDef="let element"` this IS an `Animal` but angular template
do not allow us to have the correct typing, so in this case `let
element | typeOf: Animal.DOG` should be completely safe

角度通用管道

3 个答案: