在 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 problem.

尽管如此，我从上一个问题推测您希望根据 variationCost 属性持有的值过滤数组。为此，您可以按照我在另一个问题中的建议在 *ngFor 中做一个简单的 *ngIf 。如果你想使用管道，它需要应用于 *ngFor 指令。

尝试以下方法

less-than.pipe.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: 
    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>

工作示例：Stackblitz

在 Angular 10 中使用自定义管道获取最小数字

get the lowest number using custom pipe in Angular 10

angular-pipe

angular

更新：根据属性

在 Angular 10 中使用自定义管道获取最小数字

get the lowest number using custom pipe in Angular 10

angular-pipe

angular

更新：根据 属性

更新：根据属性