Question

所以我有一个网络应用程序，用户必须输入产品编号，输入字段旁边是用户点击的箭头。单击时，会检查以确保用户输入的数字是有效的产品编号（它根据有效数字数组进行检查），如果有效，则应显示并使用与该产品相关的信息填充div。

如果用户再次输入相同的号码并再次单击箭头，则相同的div应显示在第一个div下方。如果用户输入另一个有效数字（不是相同的数字），它将在第一个div下面显示一个带有该产品信息的div。如果用户输入了无效的数字，那么它应该抛出一个错误，说无效的div。最后一点并不重要，只是它不应该生成另一个div。

到目前为止我所做的是一个show-hide方法，根据数字是否有效来显示/隐藏我的html文件中的div。但是，如果number有效，我想生成多个div（多个transactionDetails div如下所示）。我想知道我该怎么做？

这是我的html代码段：

<input class="numberInput" formControlName="ProductNumber" type="number" placeholder="{{'EnterNumber' | translate}}" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" style="width:150px !important;"/>

    <span (click)="validateNumber()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 8 8" style="vertical-align: middle;">
            <path d="M5 0v2h-5v1h5v2l3-2.53-3-2.47z" transform="translate(0 1)" />
        </svg>
    </span>

  <div class="transactionDetails grid" *ngIf="showResults">
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 8 8">
        <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z" />
        </svg>
    </span>
    <span class="image">{{product.image}}</span>
    <span>
        <div class="itemDescriptionText-regular">{{product.number}}</div>
        <div class="itemDescriptionText-regular">{{product.description}}</div>
        <div class="itemDescriptionText-bold">{{product.style}}</div>
    </span>
    <span>
    </span>
    <span>
        <div style="padding-left:20px;padding-bottom:10px;">Price </div>
        <div><input class="transactionInput" placeholder="{{'EnterPrice' | translate}}"/>x</div>
    </span>
    <span>
    <div style="text-align:center;padding-right:30px;padding-bottom:10px;">Qty</div>
    <div style="text-align:center;">
        <input type='number' name='quantity' min=0 oninput="validity.valid||(value='');" class='qty'/>
    </span>
    <span>
    <div style="text-align:center;">
        Total Price 
    </div>
    <div><br></div>
    <div style="text-align:center;">
        {{totalAmount}} 
    </div>
    </span>
</div>

这是我的验证功能：

listOfValidProductNumbers = [ 
  3097165,
  6100256,
  6124380,
  2177422,
  3795377,
  6097961,
  3808804,
  6110164,
  1705466]; 

validateSKU() 
{
   const productNumber = this.transactionForm.get('ProductNumber').value;

    if (this.listOfValidProductNumbers.indexOf(productNumber) > -1 ) {
      this.showResults = true;
    } else {
      this.showResults = false;
    }
}

Answer 1

我建议采用以下解决方案。

将一系列产品放入打字稿文件中。 e.g。

private products: Array<product> = [];

每当验证返回true时，将新/下一个产品添加到数组

validateSKU() {
   const productNumber = this.transactionForm.get('ProductNumber').value;

   if (this.listOfValidProductNumbers.indexOf(productNumber) > -1 ) {
      this.products.push(product);
      this.showResults = true;
   } else {
      this.showResults = false;
   }
}

在HTML模板中使用* ngFor来显示数组的内容。每个新产品Angular都会扩展名单。

<div class="transactionDetails grid" *ngIf="showResults">
   <div *ngFor"let product of products"> 
      <span>
           <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 8 8">
             <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z" />
           </svg>
       </span>
       <span class="image">{{product.image}}</span>
      <span>
        <div class="itemDescriptionText-regular">{{product.number}}</div>
        <div class="itemDescriptionText-regular">{{product.description}}</div>
        <div class="itemDescriptionText-bold">{{product.style}}</div>
     </span>
     <span>
    </span>
    <span>
        <div style="padding-left:20px;padding-bottom:10px;">Price </div>
        <div><input class="transactionInput" placeholder="{{'EnterPrice' | translate}}"/>x</div>
    </span>
    <span>
       <div style="text-align:center;padding-right:30px;padding-bottom:10px;">Qty</div>
       <div style="text-align:center;">
        <input type='number' name='quantity' min=0 oninput="validity.valid||(value='');" class='qty'/>
    </span>
    <span>
    <div style="text-align:center;">
       Total Price 
    </div>
    <div><br></div>
    <div style="text-align:center;">
        {{totalAmount}} 
    </div>
    </span>
  </div>
</div>

如何在点击时动态生成多个div？

1 个答案: