Asp.net core RazorComponent 使用动态 <li></li>

Question

我正在我的 asp.net 核心 mvc 应用程序中创建一个 RazorComponent。

组件中有一个html列表，它是根据从模型中获取的项目数动态生成的。

<ul>
   @{
     foreach (var prod in newProductList)
      {
        if (prod.Brand.Equals("1") && prod.Class.Equals("2"))
         {
           <li @onclick="(() => AddToSaleList(prod.Product, prod.ProductId, prod.SellRate))">
              <div class="posSelected-item">
                 <span class="posFoodname inline-block"> @prod.Product </span>
                 <span class="inline-block posSeletedPrice">@prod.SellRate</span>
                 <span class="posFoodtotal-item inline-block">
                    <i class="inline-block fas fa-minus" @onclick="() => Quantity(2)"></i>
                    <span class="posincrementItem">@changeQuaitity</span>
                    <i class="inline-block fas fa-plus" @onclick="() => Quantity(1)"></i>
                 </span>
              </div>
            </li>
          }
        }
       }
</ul>

UI 看起来像这样（如预期）

问题

UI 上的加号和减号按钮应该增加或减少列表中每个项目的数量。

我写的函数是

int changeQuaitity = 0;
public void Quantity(int e)
{
    if (e == 1)
    {
        changeQuaitity++;
    }
    else if (e == 2)
    {
        changeQuaitity--;
    }
}

但是，正如您所看到的，由于增量与参数 changeQuantity 绑定，因此单击任何加号或减号按钮都会同时更改每个列表项的数量。

如何修改代码以识别一个列表项并在单击列表上的按钮时仅更改该项目的数量。

Answer 1

每个条目都需要一个单独的计数器，因此我建议制作我所谓的“承运人类”来携带每件物品的数量信息：

class countableProducts {
    Product prod {get; set;}
    int quantity;
}

在你的初始化中：

foreach (var item in newProductList) 
    countableProductsList.Add( new countableProduct() { prod = item });

然后在你的循环中

foreach (var item in countableProductsList){
     // everything looks like item.prod.(property)
     <i class="inline-block fas fa-minus" @onclick="() => item.quantity--;"></i>
     <span class="posincrementItem">@item.quantity</span>
     <i class="inline-block fas fa-plus" @onclick="() => item.quantity++;"></i>
}

如果基本上不编写整个程序，我没有足够的代码来制作一个工作示例，但希望你能看到我的想法。