Как я могу обновить значение следующей ячейки в ngx-datatable на основе выбора значения в раскрывающемся списке? - PullRequest
Новая
       23

Как я могу обновить значение следующей ячейки в ngx-datatable на основе выбора значения в раскрывающемся списке?

0 голосов
/ 19 марта 2019

Я пытаюсь обновить другое значение ячейки, в первой ячейке у меня есть раскрывающийся список, и на основе выбора значения в раскрывающемся списке я должен обновить значения раскрывающегося списка в следующем столбце.

Как мне этого добиться, используя ngx-datatable-columns?

Это ячейка, содержащая раскрывающийся список: 

 <ngx-datatable-column name="status" prop="operationStatus" >
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

        <select class="status" (change)="changeStatus($event, rowIndex)">
          <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
            </option>
        </select>

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

Это ячейка, которую нужно обновить: 

<ngx-datatable-column name="casette" prop="cassette1Bill">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span>Kassette 1</span>
    </ng-template>
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
          <div>{{value}}</div>

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

1 Ответ

1 голос
/ 20 марта 2019

На самом деле, у вас уже есть данные всей строки, так как вы используете let-row в своих столбцах. Поскольку вы присвоили row let-row, вы можете передать row (объект, содержащий данные этой строки) в привязку события (change).

В своем файле .html просто внесите следующие изменения в этот столбец с этим раскрывающимся списком: 

<ngx-datatable-column name="status" prop="operationStatus" >
    <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

    <select class="status" (change)="changeStatus(row)">
      <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
      </option>
    </select>

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

В основном, мы передали детали строки row в changeStatus()

А в ваших component.ts просто присвойте это значение столбцу cassette1Bill 

changeStatus(row) {
  //console.log(row)
  row.cassette1Bill = '22';
}

Это должно работать. Этот столбец должен отражать обновленные значения из этого выбранного выпадающего значения.

...