Angular 9 - ngModel select and array of objects (inside a ngFor loop) - select

Question

I have an array of objects
private data=[{title:'a',num:10},{title:'b',num:20},{title:'c',num:30}];
and I want, for each of the objects to create a select box that modifies it's num field
<form class="form-horizontal" (ngSubmit)='onSubmit()'>
{{ data | json }}
<div *ngFor="let item of data;let i=index">
<div>{{ data[i]['title'] }}</div>
<select [(ngModel)]="data[i]['num']">
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>
</select>
</div>
...
IF THE CODE IS INSIDE A FORM, then the data is NEVER updated and all select box start empty
thanks

Answer 1

You're accessing a private property in your template, it has to be public.
Component
public data=[{title:'a',num:10},{title:'b',num:20},{title:'c',num:30}];
Template
{{ data | json }}
<div *ngFor="let item of data;">
<div>{{ item.title }}</div>
<select [(ngModel)]="item.num">
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>
</select>
</div>
Working example :
https://stackblitz.com/edit/angular-ivy-nazzvh?file=src/app/app.component.html

Answer 2

apparently, forms and angular still dont go well together
I changed to and it works like a charm
<form class="form-horizontal" (ngSubmit)='onSubmit()'>
{{ data | json }}
<div *ngFor="let item of data;let i=index">
<div>{{ data[i]['title'] }}</div>
<select [(ngModel)]="data[i]['num']">
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>
</select>
</div>