如何將具有較低價格字段值的數組對象直接選擇到此 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);
  }
}