简体   繁体   English

如何根据下拉列表中的值选择来更新ngx-datatable中下一个单元格的值?

[英]How can I update the next cell's value in ngx-datatable based on the selection of value in a dropdown?

I'm trying to update another cell value, in the first cell I have a dropdown, and based on the selection of value in dropdown, I have to update the values of dropdown in next column. 我正在尝试更新另一个单元格值,在第一个单元格中有一个下拉列表,根据下拉列表中的值选择,我必须在下一列中更新下拉列表的值。

How can I achieve this using ngx-datatable-columns? 如何使用ngx-datatable-columns实现此目标?

This is the cell that contains the dropdown: 这是包含下拉列表的单元格:

 <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>

This is the cell that needs to be updated: 这是需要更新的单元:

<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>

Actually, you are already have the entire row's data at your disposal, since you are using let-row on your columns. 实际上,由于在let-row上使用了let-row ,因此您已经可以使用整个行的数据。 Since you have assigned row to let-row , you can pass row (which is an object containing that row data) to your (change) event binding. 由于已将row分配给let-row ,因此可以将row (包含该行数据的对象)传递到(change)事件绑定。

On your .html file, simply make the following changes on that column with that dropdown: 在您的.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>

Basically, we have passed the row details row to changeStatus() 基本上,我们已经将行详细信息row传递给changeStatus()

And on your component.ts, simply assign that value to the cassette1Bill column 然后在您的component.ts上,只需将该值分配给cassette1Bill列即可

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

This should work. 这应该工作。 That column should reflect the updated values from that selected dropdown value. 该列应反映所选下拉值中的更新值。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 summaryFunc/summaryTemplate 格式化 ngx-datatable 中的汇总值? - How can I format the summary value in ngx-datatable with summaryFunc/ summaryTemplate? Ngx-datatable-在行值更新时删除了过滤的数据 - Ngx-datatable - Filtered data removed on row value update 如何在单个 ngx-datatable 单元格中显示嵌套对象? - How can I show nested objects in single ngx-datatable cell? 如何有条件地为 ngx-datatable 的单元格着色 - How to color conditionally a cell for ngx-datatable 如何在 Angular 8 的 ngx-datatable 中的列中添加按钮? - How can i add button to a column in a ngx-datatable in Angular 8? 我在 ngx-datatable 的每个标题单元格中都有一个自定义下拉组件 - I have a custom dropdown component in each header cell of ngx-datatable 基于组件变量的ngx数据表动态单元格样式 - ngx-datatable dynamic cell style based on a component variable (组件)HTML中的Ngx-datatable错误如何使用下拉框按列名称对表进行排序(Angular 7) - Ngx-datatable wrongly in (component) HTML how do I sort table by column name with a dropdown box (Angular 7) Ngx-Datatable-对列进行排序时rowIndex值不正确 - Ngx-Datatable - rowIndex value incorrect when sorting column ngx-datatable 标题单元格工具提示 - ngx-datatable header cell tooltip
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM