时间戳

首页 > 解决方案 > 使用Angular 10中的自定义管道获得最低数字

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

问题描述

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

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

任何帮助，将不胜感激 ：）

标签： angularangular-pipe

解决方案

我不确定您为什么选择删除上一个更好地解释该问题的问题。目前的问题是遇到XY 问题。

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

尝试以下

小于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指令结合使用。

尝试以下

最小管道.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>

工作示例：Stackblitz

推荐阅读