Selecting a item from drop down set all drop downs to the same

Question

I am having an issue with using a drop down with ngx-datatable. When the user selects an item from the drop down all other drop downs are set to that selected item. I've tried using

let-rowIndex=“rowIndex”

with no luck.

here is what I have so far.

<ngx-datatable
  class="material"
  [rows]='bankingStatements'
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [limit]="10">
  <ngx-datatable-column [width]="50" name="Paid by..."
                        [sortable]="true" [draggable]="false">
    <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

      <md-select class="paid-in-select" [(ngModel)]="selectedItem" (change)="checkIfCustomerExists(rowIndex)" name="{{rowIndex}}" id="customers-{{rowIndex}}">
        <md-option *ngFor="let cust of paidInSelect" [value]="cust">

          <div *ngIf="cust.customers?.customer_name;  else elseOther">
            {{cust.customers?.customer_name}}
          </div>

          <ng-template #elseOther>
            {{cust?.customers}}
          </ng-template>

        </md-option>
      </md-select>

    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

Any help would be much appreciated.

Answer 1

It's because every row's select is set to the same [(ngModel)] you need to bind each row to a different ngModel object. e.g. an array:

[(ngModel)]="selectedItem[rowIndex]"