Ionic 4 - 2-way binding to html table

@smbu wrote:

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

Posts: 1

Participants: 1

Read full topic