Angular losing binding after array update - arrays

Question

I have a situation where i need to have a dynamic array, think like a booking form, where people are adding flights to the list but it could be 1 flight or 10 flights. i did up a dummy example where i have been able to replicate the issue, i'm hoping it's me and not an issue with the Angluar. anyway, here it is.
I start with an empty array with a button to add items, those items are bound with a *ngFor (code below) each of the fields below are in that array, the "Name" values i have populated 1-5 by just typing
I then Decide to delete number 3 which is successful
I then decide to add a new one, here is where everything goes wrong. as you can see below, it successfully adds the 5th item again, but the one that should have #5 in it, is now blank.
I then press "Create Array" which just dumps the array to console, and i see the below, the values are still in there, but not bound to the Input for that 1 item.
Ok, Now for the code:
This is my HTML Template file:
<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>
and this is my component TS file:
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);
}
}
And here is the declaration of the array within an object
export class customObject {
Name: string;
Description: string;
Thoughts: Thought[];
constructor() {
this.Thoughts = new Array<Thought>();
}
}
export class Thought {
Name: string;
Description: string;
}
Any help or suggestions would be greatly appreciated.

Answer 1

This is a tricky thing about Angular's change detection mechanism. You can solve your problem easily by creating a clone of your object. 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

I solved it by removing the name="Name-{{i}}" from the input's, and adding [ngModelOptions]="{standalone: true}" instead. at it seemed to be an issue with the dynamic way i was assigning the Name to the input using the "index"
I was able to solve it by randomly generating a guid for each name but that created a mire of other issues as well.
That being said, i have also tested DiabolicWord's solution above and it works, since it's so simple going to mark his as the answer.