Angular 5动态输入数据获取：类Excel表格实现问询

嗨，我来帮你搞定这个动态表格的实现！你已经找对了方向——用*ngFor来循环渲染行，不过咱们可以把逻辑理得更清晰，这样不仅能添加新行，还能方便地管理每一行的数据。下面是完整的实现方案：

第一步：组件类（.ts）逻辑处理 #

咱们不用getRowCount()这种返回数字的方式，而是维护一个行数据数组，这样能直接绑定每一行的输入值，后续提交表单也更方便。

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

@Component({
  selector: 'app-excel-table',
  templateUrl: './excel-table.component.html',
  styleUrls: ['./excel-table.component.css']
})
export class ExcelTableComponent {
  // 初始化行数据，默认先显示一行
  rows: Array<{ date: string, startTime: number, finishTime: number }> = [
    { date: '', startTime: 0, finishTime: 0 }
  ];

  // 添加新行的方法
  addNewRow() {
    this.rows.push({ date: '', startTime: 0, finishTime: 0 });
  }

  // 可选：删除指定行的方法
  deleteRow(index: number) {
    // 至少保留一行
    if (this.rows.length > 1) {
      this.rows.splice(index, 1);
    }
  }

  // 可选：提交表格数据的方法
  submitData() {
    console.log('表格数据:', this.rows);
    // 这里可以写提交到后端的逻辑
  }
}

第二步：模板（.html）结构完善 #

把表格和按钮结合起来，用*ngFor循环渲染行，并且给每个输入框做双向数据绑定，这样输入的内容会自动同步到组件的rows数组里。

<div class="container mt-4">
  <button class="btn btn-primary mb-3" (click)="addNewRow()">添加新条目</button>
  <button class="btn btn-success mb-3 ms-2" (click)="submitData()">提交数据</button>

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>日期</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of rows; let i = index">
        <td><input type="text" [(ngModel)]="row.date" name="date-{{i}}" class="form-control" placeholder="请输入日期" /></td>
        <td><input type="number" [(ngModel)]="row.startTime" name="startTime-{{i}}" class="form-control" placeholder="开始时间" /></td>
        <td><input type="number" [(ngModel)]="row.finishTime" name="finishTime-{{i}}" class="form-control" placeholder="结束时间" /></td>
        <td><button class="btn btn-danger" (click)="deleteRow(i)">删除</button></td>
      </tr>
    </tbody>
  </table>
</div>

关键注意点 #

• 别忘了在模块中导入FormsModule，因为咱们用了[(ngModel)]双向绑定：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [FormsModule],
    // ...其他配置
  })
  export class YourModule { }
  

• 每个输入框的name属性要加索引后缀（比如date-{{i}}），避免表单元素重名的问题。
• 如果需要更复杂的表单验证，可以结合FormArray来实现，不过上面的方案已经能满足基础的动态添加需求啦。

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