Question

我试图根据其他值显示特定项目。

我的Dispensers数组看起来像：

CatalogBreaker

然后在显示此数据时，我想显示产品表中的PLU而不是数字

{deviceID: 37, rack: 2, arm: 5, plu1: "4", plu2: "7"},
{deviceID: 38, rack: 2, arm: 6, plu1: "5", plu2: "8"},
{deviceID: 39, rack: 2, arm: 7, plu1: "6", plu2: "9"}

所以我希望能够打印我的掌柜，但我没有显示PLU编号，而是希望显示名称，因为它更有意义。

像这样打印出来：

{pluNo:1, pluName:"Cola"},
{pluNo:4, pluName:"Sprite"},
{pluNo:5, pluName:"item3"},
{pluNo:6, pluName:"item3"},
{pluNo:7, pluName:"itemName"},
{pluNo:8, pluName:"itemName"},
{pluNo:9, pluName:"itemName"}

尝试：

<tr *ngFor="let item of dispensers; let i = index">                                                                                                                                                                     
    <td>                                                                                        
        {{item.rack}}                                                                                   
    </td>                                                                                   
    <td>                                                                                        
        {{item.arm}}                                                                                    
    </td>                                                                                   
    <td>                                                                                        
        {{item.plu1}}   //Want to show products.pluName with pluNo = item.plu1                                                                                                                                                                  
    </td>                                                                                                                       
    <td>                                                                                        
        {{item.plu2}}   //Want to show products.pluName with pluNo = item.plu2                                                                                  
    </td>                                                                                                                                                                                                   
</tr>

Answer 1

您可以创建一个基于PLU代码返回产品的函数，例如

order by case when key = 0 then 0 else 1 end, key desc, value desc

并在模板中使用getProductByPlu(id: string) { return this.products.find((p) => p.pluNo.toString() === id); }调用它。

工作示例here。

Answer 2

更好的方法

组件方：

products = [{ pluNo: 1, pluName: "Cola" },
  { pluNo: 4, pluName: "Sprite" },
  { pluNo: 5, pluName: "item3" },
  { pluNo: 6, pluName: "item3" },
  { pluNo: 7, pluName: "itemName" },
  { pluNo: 8, pluName: "itemName" },
  { pluNo: 9, pluName: "itemName" }];

productsId = {};

constructor(){
    this.products.forEach(product => {
        this.productsId[product.pluNo] = product.pluName;
    })
}

模板面：

<tr *ngFor="let item of dispensers; let i = index">
    {{ productsId[item.plu1] }}
    {{ productsId[item.plu2] }}
</tr>

<强> WORKING DEMO

更好的原因是：

根据@DanielB的解决方案，从模板方面它将调用   每次循环函数，每次循环函数内部   所以它几乎会循环（no_of_records * no_of_records）
getProductByPlu(id: string) {
    return this.products.find((p) => p.pluNo.toString() === id);
}

{{getPluName(item.plu2).pluName}}

在HTML中显示数组中的特定项

2 个答案: