使用Angular 10中的自定义管道获得最低数字

Question

我制作了自定义管道来获得数组中的最低数字，并提出了这个简单的代码，但它不起作用。渲染时显示为空白。

@Pipe({
name: 'min'
})
export class MinPipe implements PipeTransform {

transform(items: any ): any {
return Math.min.apply( Math, items );
}   
}

我是这样使用的：

<div *ngFor="let vars of variations"> 
<div class="price-start">Starts at: {{vars.variationCost | min}}</div>
</div>

如有任何帮助，我们将不胜感激：(

Answer 1

我不知道你为什么选择删除上一个问题，这个问题解释得更好。目前这个问题正在碰到XY问题。

尽管如此，我从前面的问题中推测，您希望根据variationCost属性的值来筛选数组。为此，你可以在*ngFor中做一个简单的*ngIf，就像我在另一个问题中建议的那样。如果要使用管道，则需要将其应用于*ngFor指令。

尝试以下

小于.管道.ts

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "lessThan", pure: true })
export class LessThanPipe implements PipeTransform {
transform(collection: Array<any>, key: string, boundary: number): Array<any> {
if (!collection) {
return null;
}
return collection.filter(item => item[key] < boundary);
}
}

组件

import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `
<div *ngFor="let vars of (variations | lessThan: 'variationCost':45)">
<div class="price-start">Starts at: {{ vars.variationCost }}</div>
</div>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent {
variations = [
{ variationCost: 40 },
{ variationCost: 50 },
{ variationCost: 70 },
{ variationCost: 30 },
{ variationCost: 10 }
];
}

更新：获取基于属性的数组的对象的最小值

要只显示数组的最小值，实际上并不需要*ngFor指令。您可以创建一个快速管道，并将其与*ngIf指令结合使用。

尝试以下

min.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "min", pure: true })
export class MinPipe implements PipeTransform {
transform(collection: Array<any>, key: string): Array<any> {
if (!collection) {
return null;
}
// credit: https://stackoverflow.com/a/31844649/6513921
return collection.reduce((acc, curr) =>
acc[key] < curr[key] ? acc : curr
);
}
}

模板

<div *ngIf="(variations | min: 'variationCost') as minVar">
<div class="price-start">Starts at: {{ minVar.variationCost }}</div>
</div>

工作示例：Stacklitz