Angular 14：向列表添加新项时如何动态渲染HTML/DOM

云原生阿岚

2026-7-17

Angular 动态添加/删除列表项解决方案

Angular 是数据驱动视图的框架，无需手动拼接 HTML 操作 DOM，直接操作数据源details.cutsAndPrices数组，*ngFor会自动同步更新视图。以下是具体实现步骤：

1. 定义数据类型（可选但推荐）

在组件类中明确数据结构，避免类型混乱：

interface CutsAndPrice {
  type: string;
  price: string | number;
}

2. 初始化数据源

确保details.cutsAndPrices为数组类型，在组件初始化时赋值：

details = {
  cutsAndPrices: [] as CutsAndPrice[]
};

3. 实现添加/删除方法

在组件类中编写addCut和removeCut逻辑：

addCut(): void {
  // 添加空默认项，供用户输入内容
  this.details.cutsAndPrices.push({ type: '', price: '' });
}

removeCut(index: number): void {
  // 删除对应索引的列表项
  this.details.cutsAndPrices.splice(index, 1);
}

4. 修改模板并添加双向绑定

将输入框与数据源双向绑定，确保用户输入同步到数据：

<button (click)="addCut()" mat-raised-button color="primary">Add New Cut</button>
<button (click)="addCut()" mat-raised-button color="primary">+</button>
<div class="cutcontainer" style="margin-top:10px;" *ngFor="let item of details.cutsAndPrices; let index = index;">
  <mat-form-field class="cutitem">
    <input matInput placeholder="Cut" [(ngModel)]="item.type">
  </mat-form-field>
  <mat-form-field style="margin-right:15px;">
    <input matInput placeholder="Price" [(ngModel)]="item.price">
  </mat-form-field>
  <button (click)="removeCut(index)" mat-raised-button color="warn" [id]="item.type">-</button>
</div>

关键注意事项

双向绑定[(ngModel)]依赖FormsModule，需在对应模块中导入：

// 示例：在app.module.ts中
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }