search

eakoriakin / ionic-selectable

Ionic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.
MIT License
550 stars 126 forks source link

ionic-selectable in *ngFor not updating current row field value otherwise the last row item value #334

Open geraparra opened 3 years ago

geraparra commented 3 years ago

I want to use ionic-selectable inside a table grid, everything works well except that when I want to change the select value it change the last row value instead the row I want to change.

this is my code:

<ng-container *ngFor="let line of quote.lines;index as i"> <tr [ngClass]="i%2==0?'row-even':'row-odd'">

    <td>
      <div style="display: flex; flex-direction: row;">
        <ion-input [(ngModel)]="line.price" type="number" step="0.01" class="ion-margin-end" selectOnFocus
          [enableIfEditable]="quote" disableDragInput>
        </ion-input>

        <ionic-selectable [(ngModel)]="line.currency" itemValueField="code" itemTextField="code"
          [shouldStoreItemValue]="true" [items]="quote.registry_Currencies" [canSearch]="true"
          [shouldFocusSearchbar]="true" closeButtonSlot="end" [disabled]="!quote.editable"
          searchFailText="Currency not found" (onChange)="portChange(i, $event)"
          (onSearch)="searchCurrencies($event)" (onOpen)="onCurrencyOpen($event)">
          <ng-template ionicSelectableTitleTemplate>
            Currency
          </ng-template>
        </ionic-selectable>
      </div>
    </td>

  </tr>

</ng-container>

when I debug this method it logs rows 6 instead of row 1 I'm current in:

portChange(i, event: { component: IonicSelectableComponent, value: any }) { console.log('currency code:', i + " - " + event.value); }

Thank you for help.