Ng2smarttable - 更新另一个单元格

时间:2017-11-09 04:04:35

标签: angular cell emit

我正在尝试更新另一个单元格值。我有以下字段unit pricequantitytotalprice。从表中读取unit pricequantity让用户填写。因此,一旦用户填写quantity,这将自动更新总字段。

我尝试使用rendercomponentquantity字段来发出或更改总计字段,但我似乎无法更新其他字段。任何建议或想法。

下面是Order.component.ts和inputrender.component文件

import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';
import { InputRenderComponent } from './inputrender.component';
import { Services } from '../../services/services';

@Component({
    selector: 'order',
    templateUrl: './order.component.html'
})
export class OrderComponent implements OnInit {

    public source: LocalDataSource;
    boatlist: any;


    constructor(private service: Services) { }

    public settings = {
        mode: 'external',
        attr: { id: 'ProductTable', class:'' },
        selectMode: 'multi',
        columns: {
            OptionId: {
                title: 'Option Id',
                filter: true,
                editable: true,
                addable: false,
            },
            Description: {
                title: 'Description',
                filter: true,
                editable: true,
                addable: false,
            },
            Quantity: {
                title: 'Quantity',
                type: 'custom',
                renderComponent: InputRenderComponent,
                onComponentInitFunction(instance:any) {
                    instance.save.subscribe( (row:any) => {
                        debugger;
                        alert(`The total price is ${row.TotalPrice} `)

                    });
                },
            },
            RetailPrice: {
                title: 'Unit Price',
                filter: true,
                editable: false,
                addable: false,
            },

            TotalPrice: {
                title: 'Total',
                editable: true,
                valuePrepareFunction: (cell: any, row: any) => {

                    return row.Quantity * row.RetailPrice;

                },

            }
        },
        actions: { columnTitle: 'Action', add: false, edit: false, delete: false, select: true, position: 'right' },

        pager: { display: true, perPage
--------------------

Inputrender.component.ts

this rendercomponet -- inputrender.component.ts



import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { ViewCell, Cell, LocalDataSource } from 'ng2-smart-table';

@Component({
    template: `
    <input type="number" class="form-control"  (input)="onChange($event.target.value) "  >
  `,
})
export class InputRenderComponent implements ViewCell, OnInit {

    public renderValue: any;
    source: LocalDataSource;

    @Input() value: any;
    @Output() save: EventEmitter<any> = new EventEmitter();
    @Input() rowData: any;

    constructor() { }

    ngOnInit() {
        this.renderValue = this.value;

    }
    onChange(event: any) {
        debugger;
        this.rowData.Quantity = Number(event);
        this.rowData.TotalPrice = this.rowData.Quantity * this.rowData.RetailPrice;
        //   this.source.update(this.rowData.TotalPrice, this.renderValue);
        this.save.emit(this.rowData);

        console.log("event .." + event);
    }


}

0 个答案:

没有答案