数组更新后角度丢失绑定

Question

我有一个情况，我需要一个动态阵列，想像一个预订表格，人们正在添加列表的航班，但它可能是1个航班或10个航班。我做了一个虚拟的例子，我能够复制这个问题，我希望它是我，而不是Angluar的问题。无论如何，在这里。

我从一个带有按钮的空数组开始添加项目，这些项目用* ngFor（下面的代码）绑定，下面的每个字段都在该数组中，＆＃34;名称＆＃34;只需键入即可填充1-5的值

然后我决定删除成功的第3号

然后我决定添加一个新的，这里是一切都出错了。正如你在下面看到的，它成功地再次添加了第5个项目，但是其中应该有＃5的项目现在是空白的。

然后按＆＃34; Create Array＆＃34;只是将数组转储到控制台，我看到下面，值仍在那里，但没有绑定到该1项的输入。

好的，现在代码：

这是我的HTML模板文件：

<form name="form" #f="ngForm">
Name: <input class="input" type="text" name="Name" [(ngModel)]="model.Name" 
#Name="ngModel" />
Description: <input class="input" type="text" name="Description" 
[(ngModel)]="model.Description" #Description="ngModel" />
<br>

<button (click)="addThought()">New Thought</button>

<div class="Thought" *ngFor="let Thought of myObject.Thoughts;let i=index">
Thought Name:<input name="Name-{{i}}" [(ngModel)]=Thought.Name 
#Thought.Name="ngModel" type="Text" /><br>
Thought Description:<input name="Description-{{i}}" 
[(ngModel)]=Thought.Description #Thought.Description="ngModel" type="Text" 
/> 
<br>
<br>


<button (click)="removeThought(Thought)">Remove Thought</button>
</div>
<button (click)="CreateThought()">Create Arrays</button>
</form>

这是我的组件TS文件：

export class CreateThoughtComponent implements OnInit {

  model: any = {};
  myObject: customObject = new customObject;

  constructor(private guid: Guid, private staticData: StaticDataService) {

  }

  ngOnInit() {

  }

  CreateThought() {
      console.log(this.myObject);
  }

  addThought() {
    let thought: Thought = new Thought;
    this.myObject.Thoughts.push(thought);
  }

  removeThought(t: Thought) {
    this.myObject.Thoughts = this.myObject.Thoughts.filter(item => item !== 
t);
  }
}

这是对象

中数组的声明

export class customObject {
    Name: string;
    Description: string;
    Thoughts: Thought[];
    constructor() {
        this.Thoughts = new Array<Thought>();
    }
}
export class Thought {
    Name: string;
    Description: string;
}

非常感谢任何帮助或建议。

Answer 1

这对于Angular的变化检测机制来说是个棘手的问题。您可以通过创建对象的克隆来轻松解决问题。 e.g。

addThought() {
   let thought: Thought = new Thought;
   this.myObject.Thoughts.push(thought);

   // clone the object in order to force Angular to apply changes
   this.myObject = JSON.parse(JSON.stringify(this.myObject));
}

Answer 2

我通过删除名称=＆＃34;名称 - {{i}}＆＃34;解决了这个问题。从输入中添加[ngModelOptions] =＆＃34; {standalone：true}＆＃34;代替。在使用＆＃34;索引＆＃34;

的动态方式我似乎是一个问题。

我能够通过为每个名字随机生成一个guid来解决它，但这也造成了其他问题。

话虽这么说，我也测试了上面的DiabolicWord解决方案并且它起作用，因为它很简单，将其标记为答案。