Question

我有一个对象的数组（config.lensTab），我在我的Html中用ngFor显示：

<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>
[...]

我添加了＆＃39; +＆＃39;按钮，它会在给定索引（idx）中的数组中插入一个元素：

  public addLens(idx: number) {
           let toAdd = new LensModel(0, 0, 0,
           new MaterialModel('Air', 0), 0, 0);
           this.config.lensTab.splice(idx + 1, 0, toAdd);
     }

当我使用console.log显示数组的内容时，插入操作似乎正常工作。但是在我的html视图中，新行旁边的行与此新行的值相同。

我给你一个简单的理解例子：

Tab : [RED, GREEN, WHITE] --> add "BLUE" at index 1 ---> [RED, BLUE, BLUE, WHITE]

我做错了什么？

编辑：这是我初始化配置对象的方式

this.config = new ConfigModel();
this.config.lensTab = [];

this.config.lensTab.push(new LensModel(1, 2, 3, new MaterialModel('Acier', 12), 4, 5));

EDIT2 ：

Before clicking the "+" button

after clicking the "+" button

plunker：https://embed.plnkr.co/DghlRr/

Answer 1

我使用了angular的trackBy函数，以便ngFor检测到变化。

https://plnkr.co/edit/iyXOgVSwN2VuJT64YxrT?p=preview

sub

更新了plunker。

Angular5在数组中插入元素，同时使用ngfor显示它

1 个答案: