How to display current value to input field

Question

I have a table, where is list of input's from:

 list=[
{id:1,value:null},
{id:2, value:null},
]

I am using input fields to change the value of each object from a list and send the data to one database

<tbody>
      <tr *ngFor="let item of list">
        <td>{{item.id}}</td>
        <td>
           <input matInput type="number"name="fname" [(ngModel)]="item.value">
        </td> 
      </tr>
    </tbody>

After that I am getting data from the database and want to display the current value from the database. The problem is I am sending data ok, getting data ok but the current data is not showing in the input field. When I use [(value)] instead of [(ngModel)], the data from the database is displayed fine, but I can no longer send the value.

Answer 1

value is a property you can bind a value to with [value]="name" while (valueChange)="..." doesn't work, because the element doesn't have an @Output() valueChange; therefore [(value)]="..." is invalid

Answer 2

See : StackblitzDemo

in case your request take too long so data will not shown in your view directly after component init so u need to use

1 - ChangeDetectorRef

2 - async pipe for view and it was the best for it