Angular 5实现表格新增行并设置可编辑功能问题

我来帮你解决这个问题！其实核心就是给你的行数据加一个「可编辑状态标记」，这样就能精准控制新增行的编辑状态了，具体步骤如下：

1. 给你的模型对象新增可编辑属性 #

首先，在你的MyModelObject类/接口里添加一个布尔类型的editable字段，用来标记该行是否处于可编辑状态：

// 假设你的原模型是这样的
export interface MyModelObject {
  // 你的原有属性，比如：
  username: string;
  email: string;
  // 新增可编辑状态标记
  editable: boolean;
}

2. 修改addNewLine()方法，默认开启新行的可编辑状态 #

之前你只是push了空的模型对象，现在要在创建新对象时把editable设为true：

addNewLine() {
  // 创建一个新的模型实例，默认开启可编辑
  const newRow: MyModelObject = {
    username: '', // 初始值可以设为空或默认值
    email: '',
    editable: true // 关键：这里让新行默认可编辑
  };
  this.collection.push(newRow);
}

3. 在模板中根据状态切换显示方式 #

用*ngIf判断当前行的editable属性，切换显示输入框还是普通文本，同时绑定ngModel到模型的对应属性：

<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>邮箱</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of collection">
      <!-- 用户名单元格 -->
      <td>
        <input *ngIf="item.editable" [(ngModel)]="item.username" placeholder="输入用户名" />
        <span *ngIf="!item.editable">{{ item.username }}</span>
      </td>
      <!-- 邮箱单元格 -->
      <td>
        <input *ngIf="item.editable" [(ngModel)]="item.email" type="email" placeholder="输入邮箱" />
        <span *ngIf="!item.editable">{{ item.email }}</span>
      </td>
      <!-- 可选：添加切换编辑状态的按钮 -->
      <td>
        <button (click)="item.editable = !item.editable">
          {{ item.editable ? '完成编辑' : '编辑' }}
        </button>
      </td>
    </tr>
  </tbody>
</table>

<!-- 添加新行按钮 -->
<button (click)="addNewLine()">添加新行</button>

替代方案：不修改原模型的情况 #

如果不想改动原模型，可以单独维护一个数组来记录每一行的编辑状态：

// 组件里新增一个数组跟踪编辑状态
editStates: boolean[] = [];

// 初始化时同步状态（比如原有行默认不可编辑）
ngOnInit() {
  this.editStates = this.collection.map(() => false);
}

addNewLine() {
  this.collection.push({ username: '', email: '' }); // 原模型结构
  this.editStates.push(true); // 新行默认可编辑
}

模板里用索引关联状态：

<tr *ngFor="let item of collection; let i = index">
  <td>
    <input *ngIf="editStates[i]" [(ngModel)]="item.username" />
    <span *ngIf="!editStates[i]">{{ item.username }}</span>
  </td>
  <!-- 其他列类似 -->
  <td>
    <button (click)="editStates[i] = !editStates[i]">
      {{ editStates[i] ? '完成' : '编辑' }}
    </button>
  </td>
</tr>

这样新增的行就会默认处于可编辑状态，完美满足你的需求啦！

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