javascript - 将 ngFor 列表中的按钮更改为文本字段以获取值，然后提交进行处理

Question

首先，我喜欢 Angular 2 (v5)。花了一段时间才“明白”，但突然间一切都有意义了，并且非常喜欢使用它。

我有一个从 WebApi 服务生成的产品列表，我将其加载到 Observable 数组中并使用 ngFor 显示在 UI 上。非常简单的东西。每个商品都有一个“添加到购物车”按钮。同样简单，一切都很好。

我想要做的是让用户的流程更加流畅，因此当用户单击“添加到购物车”按钮时，该按钮会隐藏，并会显示一个带有“添加”按钮的数字输入微调器，以便用户此时可以简单地选择数量，然后再提交到 AddToCart 功能。否则，他们必须添加到购物车，然后更新数量。

我遇到了“大脑不工作”的时刻，如果我使用 Angular 5 和 ngIf 显示和隐藏 ngFor 列表中的元素，我如何识别该唯一元素，或者我应该使用一些标准 JavaScript如果是的话，该元素的唯一标识符是什么？显然，它不适用于组件级别的变量，因为它会影响列表中的每个按钮。在这种情况下，也许我根本不应该考虑使用 Angular 来操作 DOM。

我可以从模型中获取productID，并将其附加到按钮的ID字段中，为其提供类似于“btn_000142”的ID，并为隐藏元素提供“quantity_000142”的ID，然后当单击按钮时，我使用一些 javascript(或 jQuery？)来显示和隐藏，然后将对象的值传递回组件代码。但这是处理这个问题的正确方法吗？

可能是一个愚蠢的问题，只是有时很难打破“只需扔一些 jQuery ”或“在 MVC 中我会像这样轻松地做到这一点......”思维模式! :)

下面的一些代码:

<div *ngFor="let prod of prodDetails$ | async" [@fadeInOut] class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
  <div class="card h-100">
      <a routerLink="{{prod.productWebFriendlyName}}"><img class="card-img-top" [src]="prod.productImgUrl" alt=""></a>
          <div class="card-body">
                <h4 class="card-title">
                    <a routerLink="{{prod.productWebFriendlyName}}">{{ prod.productName }}</a>
                </h4>
                <p class="card-text">{{ prod.productDescription }}</p>
                <p class="card-text">{{ prod.productPrice | currency:'GBP' }} 
                  <!-- click this button to display the div below and hide this button-->
                  <button type="button" (click)="addToCart(prod)" class="btn btn-primary float-right small">Add to Cart</button> 
                  <!-- This is hidden until the Add to Cart is clicked -->
                  <div id="numberSpinnnerHere" style="display:none">NUMBER SPINNER HERE <button id="FinalAddToCartWithQuantity(prod, quantity)">Add</button></div></p>
            </div>
        </div>
    </div>

Answer 1

您可以这样做(为了清晰起见， trim 了代码)

<div *ngFor="let prod of prodDetails$ | async; let i = index" [@fadeInOut]>
      <div class="card h-100">
          <a routerLink="{{prod.productWebFriendlyName}}"></a>
              <div class="card-body">
                      <!-- click this button to display the div below and hide this button-->
                      <button *ngIf="!productAdded[i]" type="button" (click)="addToCart(prod, i)" class="btn btn-primary float-right small">Add to Cart</button> 
                      <!-- This is hidden until the Add to Cart is clicked -->
                      <div *ngIf="productAdded[i]" id="numberSpinnnerHere" style="display:none">NUMBER SPINNER HERE <button id="FinalAddToCartWithQuantity(prod, quantity)">Add</button></div></p>
                </div>
            </div>
        </div>

然后在你的组件中

productAdded = new Array(prodDetails.length)

addToCart(prod, index) {
     productAdded[index] = true
}