Angular中点击按钮如何动态生成多个产品信息div？

首先，我们可以通过Angular的*ngFor指令结合组件内的数组来实现动态生成多个transactionDetails div，完全替代原来的显隐控制方式，具体步骤如下：

1. 组件类（.ts）修改 #

先在你的组件类里定义一个数组来存储所有已添加的产品信息，同时保留你的有效产品编号数据源：

// 假设你已有有效编号数组
validProductNumbers = ['P001', 'P002', 'P003']; 
// 用于存储所有要展示的产品信息
addedProducts: any[] = []; 

validateNumber() {
  // 获取输入框的编号值（根据你的FormControl调整）
  const inputNumber = this.yourForm.get('ProductNumber')?.value;
  
  // 验证是否为有效编号
  const isValid = this.validProductNumbers.includes(inputNumber);
  
  if (isValid) {
    // 根据编号获取对应产品详情（替换成你实际的信息获取逻辑）
    const productInfo = this.getProductDetails(inputNumber);
    
    // 不管是否重复，直接推入数组——满足重复输入生成相同div的需求
    this.addedProducts.push(productInfo);
    
    // 可选：清空输入框，方便后续输入
    this.yourForm.get('ProductNumber')?.reset();
  }
  // 无效编号不做处理（按需求忽略错误提示）
}

// 示例：根据编号获取产品信息的方法
getProductDetails(number: string) {
  return {
    productNumber: number,
    productName: `专属产品${number}`,
    productPrice: Math.floor(Math.random() * 100) + 50
  };
}

2. HTML模板修改 #

把原来的显隐div替换成*ngFor循环，让Angular自动帮你生成每个产品的transactionDetails容器：

<!-- 保留你原有的输入框和箭头按钮 -->
<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 -->
<div *ngFor="let product of addedProducts" class="transactionDetails">
  <!-- 这里填充你的产品信息字段，根据实际需求调整 -->
  <div>产品编号：{{product.productNumber}}</div>
  <div>产品名称：{{product.productName}}</div>
  <div>产品价格：{{product.productPrice}}元</div>
</div>

核心逻辑说明 #

• 用addedProducts数组追踪所有需要展示的产品，每次验证通过就把对应信息推入数组；
• *ngFor会自动遍历数组，为每个元素生成独立的transactionDetails div，完美适配"重复输入生成相同div、新有效编号生成对应div"的需求；
• 无效编号时不修改数组，自然不会生成新div，完全符合你的要求。

这样就彻底抛弃了显隐控制的方式，实现了真正的动态生成效果～

内容的提问来源于stack exchange，提问作者Euridice01