如何将具有较低价格字段值的数组对象直接选择到此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，即formats数组中第一个对象的price字段值。

现在，这个格式数组可以包含多个具有不同价格的对象。是否有方法选择价格较低的对象(进入格式数组(？相反，为了选择数组的第一个对象，我想选择价格较低的对象并显示此值。

是否可以直接将其放入HTML页面？(可能使用管道(

Answer 1

这里有一个非常简单的例子(不处理空数组，不检查空价格，假设价格总是一个数字…(：

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

Answer 2

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