如何将具有较低价格字段值的数组对象直接选择到此 Angular 应用程序的 HTML 中？

Question

到我正在处理的 Angular 应用程序的 HTML 页面中，我有这个标签插入一个显示产品价格的值：

<h3 class="product-price" *ngIf="isApproved && canShowPrices;">
    {{wine.formats[0].price | number:'0.2-2'}} € <span class="product-price-unit">/Unit.</span>
</h3>

正如你所看到的，它显示了这个值： wine.formats[0].price这是格式数组中第一个对象的价格字段值。

现在这个格式数组可以包含多个具有不同价格的对象。 是否存在选择价格较低的对象（进入格式数组）的方法？ 而不是选择数组的第一个对象，我想选择价格较低的对象并显示该值。

是否可以直接在 HTML 页面中进行？ （也许使用管道）

Answer 1

是的...可以使用管道直接在 HTML 标记中执行此操作。 我鼓励您为此使用自定义管道。

Answer 2

这是一个非常简单的例子（不处理空数组，不检查空价格，假设价格总是一个数字......）：

@Pipe({ name: 'lowerPrice' })
export class LowerPricePipe implements PipeTransform {
  transform(items: { price: number }[]): number {
    const prices = items.map(item => {
      return item.price;
    });
    return Math.min(...prices);
  }
}