我正在尝试更新另一个单元格值。我有以下字段unit price
,quantity
和totalprice
。从表中读取unit price
,quantity
让用户填写。因此,一旦用户填写quantity
,这将自动更新总字段。
我尝试使用rendercomponent
和quantity
字段来发出或更改总计字段,但我似乎无法更新其他字段。任何建议或想法。
下面是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);
}
}