Hi all,
I want to do some 2-way binding to an HTML table in an ion-grid. When clicked on a cell I use the Wheel selecter plugin to change the data in the cell. All is working except the value changes in every ion-row, not only the cell that was clicked on. So I guess I should put somewhere a row index or something but can not really figure what/where.
This is the code so far:
html
<ion-content>
<ion-grid>
<ion-row *ngFor="let name of names; let idx = index;">
<div id='header' class="table-header">
<div align="center">
<p style="font-size: 14px; color: var(--ion-color-light); margin-bottom: 5px;"> Title1 </p>
<p style="font-size: 20px; color: var(--ion-color-light); font-weight: bold; margin-top: 0px;"> {{name.name}}
</p>
</div>
<div align="center">
<p style="font-size: 14px; color: var(--ion-color-light);margin-bottom: 5px;"> Title 2 </p>
<p style="font-size: 20px; color: var(--ion-color-light); font-weight: bold; margin-top: 0px;">
{{name.total}} </p>
</div>
</div>
<div class="container">
<table id="myTable">
<thead>
<tr align="center">
<th>subject 1</th>
<th>subject 2</th>
<th>subject 3</th>
<th>subject 4</th>
<th>subject 5</th>
<th>subject 6</th>
<th>subject 7</th>
<th>subject 8</th>
<th>subject 9</th>
<th>subject 10</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td (click)="select_1(name.name,idx)"><ion-input [(ngModel)]="id_1" readonly="true"></ion-input></td>
<td (click)="select_2(name.name,idx)"><ion-input [(ngModel)]="id_2" readonly="true"></ion-input></td>
<td (click)="select_3(name.name,idx)"><ion-input [(ngModel)]="id_3" readonly="true"></ion-input></td>
<td (click)="select_4(name.name,idx)"><ion-input [(ngModel)]="id_4" readonly="true"></ion-input></td>
<td (click)="select_5(name.name,idx)"><ion-input [(ngModel)]="id_5" readonly="true"></ion-input></td>
<td (click)="select_6(name.name,idx)"><ion-input [(ngModel)]="id_6" readonly="true"></ion-input></td>
<td (click)="select_7(name.name,idx)"><ion-input [(ngModel)]="id_7" readonly="true"></ion-input></td>
<td (click)="select_8(name.name,idx)"><ion-input [(ngModel)]="id_8" readonly="true"></ion-input></td>
<td >{{name.time}}</td>
<td (click)="select_10(name.name,idx)"><ion-input [(ngModel)]="id_10" readonly="true"></ion-input></td>
</tr>
</tbody>
</table>
</div>
</ion-row>
</ion-grid>
</ion-content>
TS code (1 function, all are pretty similar)
select_1(val1,idx) {
console.log(val1,idx);
this.selector.show({
title: "Choose hours, minutes",
items: [this.jsonData.hours, this.jsonData.minutes],
positiveButtonText: "Confirm",
negativeButtonText: "Cancel",
theme: "dark",
}).then(
result => {
this.timeresult = result[0].description + ':' + result[1].description;
this.id_1 = this.timeresult;
},
err => console.log('Error: ', err)
);
}
What do I need to change so only the chosen cell get the new value ?
Thanks