Javascript *ngFor:数组索引处的父元素重置子组件

我有一个带有对象数组的父组件

我使用*ngFor循环通过@Input（）在每个索引处使用元素填充子组件

如果在索引处更改对象，子组件将完全重置，而不仅仅是接受新输入并维护其其他属性

打字稿： 父HTML：

//填充inputObject的3种不同方式
//不维护“选定”属性
//不维护“选定”属性
//是否维护“选定”属性
更改对象

子HTML：

a:{{inputObject.a}
b:{{inputObject.b}
已选定：{{SELECTED}

结果 在父HTML中，

[inputObject]=“objectArray[0]”

是我发现的唯一解决方案，它在更改

objectArray[0]

中的元素时维护子元素的其他属性

这对我来说不够好，因为我有很多对象要显示

有没有更好的方法将数据发送到组件中而不完全重置它们？

---

我尝试将

角度访问器

与

@Input（）set inputObject{…}

一起使用，但它无法维护组件的属性。也就是说，当

inputObject

更改时，构造函数再次执行，将所有属性重置为默认值。

您需要按对象按某个索引进行跟踪，该索引在执行changeAnObject操作后不会更改

<div *ngFor="let object of objectArray; let index = index; trackBy: trackByFn">

就这样做吧，它会起作用的！：）

它所做的是，通过一个唯一且不改变的id跟踪对象，它不会通过ngFor循环重复，因为它检测到跟踪循环的id没有改变

---

我的示例基于stackBlitz的相同行为，如果您使用

push（）

，而不是直接按索引插入对象<代码>this.objectArray.push（sameObject）@XavierBrassoud，这与添加新对象的效果并不完全相同，但仍需要创建一个新的附加对象。这肯定会创建一个新属性并将其设置为默认属性。

// 3 different ways to populate inputObject

<div *ngFor="let object of objectArray">
  <app-child [inputObject]="object"></app-child> // does not maintain "selected" property
</div>

<div *ngFor="let object of objectArray; let index = index">
  <app-child [inputObject]="objectArray[index]"></app-child> // does not maintain "selected" property
</div>

<div>
  <app-child [inputObject]="objectArray[0]"></app-child> // DOES maintain "selected" property
</div>

<button (click)="changeAnObject()">Change Object</button>

<div (click)="selected = !selected">
    a: {{inputObject.a}}
    b: {{inputObject.b}}
    SELECTED: {{selected}}
</div>

<div *ngFor="let object of objectArray; let index = index; trackBy: trackByFn">

trackByFn(index, item) {
   return item.a; 
}