Angular中如何实现未知数量Array object的并列列布局？

核心思路 #

通过*ngFor遍历动态数组，将数组中每个对象与表单控件双向绑定，同时提供添加/删除按钮动态调整数组数量，满足「未知数量」的需求。

示例代码 #

组件类（app.component.ts）

import { Component } from '@angular/core';

interface Item {
  name: string;
  value: number;
  desc?: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: Item[] = [
    { name: "项目1", value: 10 },
    { name: "项目2", value: 20 }
  ];

  // 添加新数组项
  addItem() {
    this.items.push({ name: "", value: 0 });
  }

  // 删除指定索引的数组项
  removeItem(index: number) {
    if (this.items.length > 1) {
      this.items.splice(index, 1);
    }
  }
}

模板文件（app.component.html）

<div class="item-group">
  <!-- 遍历数组渲染每组数据 -->
  <div class="item-row" *ngFor="let item of items; let i = index">
    <input 
      type="text" 
      [(ngModel)]="item.name" 
      placeholder="名称"
      class="form-control"
    >
    <input 
      type="number" 
      [(ngModel)]="item.value" 
      placeholder="数值"
      class="form-control"
    >
    <button (click)="removeItem(i)" class="btn-delete">删除</button>
  </div>

  <!-- 添加按钮 -->
  <button (click)="addItem()" class="btn-add">添加新项</button>
</div>

样式文件（app.component.css）

.item-group {
  max-width: 600px;
  margin: 20px;
}

.item-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.form-control {
  padding: 8px;
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn-delete, .btn-add {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-add {
  background-color: #007bff;
  color: white;
  margin-top: 10px;
}

关键说明 #

• 使用[(ngModel)]实现双向数据绑定，需在app.module.ts中导入FormsModule：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule // 必须导入才能使用ngModel
    ],
    // 其他配置项
  })
  export class AppModule { }
  

• *ngFor的let i = index用于获取当前项索引，支持精准删除操作。
• 数组项动态增减时，Angular会自动同步更新视图，无需手动触发变更检测。

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