As title.
Let me use an example to explain what I want. Assume that I am a teacher and have a set of student exam scores like this:
[
{"name":"John","score":88},
{"name":"Andy","score":80},
{"name":"Mary","score":93},
{"name":"Sandra","score":76},
{"name":"Thomas","score":55},
{"name":"Peter","score":69}
]
I want to display it inside a grid with score field is shown in an input area that I can edit to change student's score. And I need to get the changed score of a student. I can make my page as this:
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let stu of students">
<td>{{stu.name}}</td>
<td>{{stu.score}}</td>
</tr>
</tbody>
</table>
Then I didn't know how to make the score can be edited and how to get the edited value from a certain record. Could someone guide me a way to get it? I've searched use key word "angular set and get input inside grid" but find some didn't match what I needed and some uses older Angular.js and may not suitable for my request.
You can achieve it like this ngModel will automatically update students;
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let stu of students">
<td><input [(ngModel)]="stu.name"></input></td>
<td><input [(ngModel)]="stu.score"></input>}</td>
</tr>
</tbody>
</table>