Angular5中在数组指定索引插入元素并通过ngFor同步展示

嘿，我来帮你搞定这个问题！要实现点击按钮在指定索引插入元素并让视图同步更新，其实只要抓住Angular变更检测的关键点就行，具体步骤如下：

1. 正确实现addLens方法 #

Angular的*ngFor会监听数组的结构变化，所以我们需要用能修改原数组的方法，splice就是最合适的选择——它不仅能在指定位置插入元素，还会触发Angular的变更检测，让视图自动更新。

你的方法可以这样写：

public addLens(idx: number) {
  // 实例化一个新的LensModel，这里根据你的构造函数传入正确的初始值
  const newLens = new LensModel(0, /* 其他构造参数，比如默认的厚度、材质等 */);
  // 在idx位置插入新元素，第二个参数0表示不删除任何元素
  this.config.lensTab.splice(idx, 0, newLens);
}

为什么用splice？因为如果只是直接给数组赋值或者用其他不改变原数组引用的操作，Angular可能检测不到变化，而splice是直接修改原数组的结构，变更检测机制会立刻感知到。

2. 绑定按钮点击事件 #

在HTML里，给每个行的+按钮绑定addLens方法，传入当前行的索引i：

<tr *ngFor="let item of config.lensTab; let i = index;">
  <th scope="row">{{ i + 1}}</th>
  <th>
    <label></label>
    <input [(ngModel)]="item.radius" class="form-control" type="number" step="0.01" name="radius-{{i}}">
  </th>
  <!-- 新增的+按钮，绑定点击事件 -->
  <td>
    <button class="btn btn-sm btn-primary" (click)="addLens(i)">+</button>
  </td>
</tr>

这里你已经给input设置了name="radius-{{i}}"，这个做得很对，确保每个表单控件的name唯一，避免ngModel出现命名冲突。

3. 特殊情况：手动触发变更检测 #

如果遇到视图没有自动更新的情况（比如你在异步操作里调用addLens），可以手动触发变更检测：
首先在组件里注入ChangeDetectorRef：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  public addLens(idx: number) {
    const newLens = new LensModel(0, /* 构造参数 */);
    this.config.lensTab.splice(idx, 0, newLens);
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

不过这种情况比较少见，一般用splice就足够让视图同步了。

验证要点 #

• 确保LensModel的构造函数能正确初始化所有需要绑定的属性（比如radius），这样新插入的元素才能和现有元素一样正常使用[(ngModel)]绑定。
• 测试点击按钮后，数组config.lensTab的长度是否增加，同时视图是否渲染出新增的行。

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