如何在角度2中将表中编辑的旧值和新值保存为JSON

Question

如何在按钮单击事件中将html表数据保存为JSON。

request.component.html

<table class='table' *ngIf='TableValues.length'> 
 
       <thead> 
 
        <tr> 
 

 
         <th>Classification Id</th> 
 
         <th>Short Name</th> 
 
         <th>Long Name</th> 
 
         <th>Is Active</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr *ngFor="#row of TableValues | requestFilter:listFilter"> 
 
         <td contenteditable='true'>{{ row.ClassifiationId }}</td> 
 
         <td contenteditable='true' (input)="onRowClick($event, row.ClassifiationId)" >{{ row.LongName }}</td> 
 
         <td contenteditable='true'>{{ row.ShortName }}</td> 
 
         <td contenteditable='true'>{{row.IsActive}}</td> 
 
         <!--<td><button (click)="myFunc()">edit</button></td> 
 
         <td><button (click)="myCancel()">Cancel</button></td>--> 
 
        </tr> 
 
       </tbody> 
 
     </table> 
 
    div style="position: absolute; left: 70%; height:200px!important;" class="btn"><button (click)="myCancel()">Cancel Request</button></div> 
 
<div style="position: absolute; left: 80%;" class="btn"><button (click)="mySubmit()">Submit Request</button></div> 
 
<style type="text/css"> 
 
    .btn { 
 
     cursor: pointer; 
 
     font-weight:bold; 
 
     color: #900; 
 

 
    } 
 
</style>  
 
    

request.component.ts

import { RequestFilterPipe } from './request-filter.pipe'; 
 
import { TableService } from './table-service.component'; 
 
@Component({ 
 
    selector: 'mm-request', 
 
    templateUrl: 'app/dataManagement/request.component.html', 
 
    styleUrls: ['app/datamanagement/datamanagement.css'], 
 
    pipes: [RequestFilterPipe] 
 
}) 
 

 

 
export class RequestComponent { 
 
    pageTitle: string = 'Request'; 
 
    imageWidth: number = 50; 
 
    imageMargin: number = 2; 
 

 

 
    TableValues: ItableValues[] = []; 
 
    constructor(private _tableService: TableService) 
 
    { 
 
    } 
 
    ngOnInit(): void { 
 
     this.TableValues = this._tableService.getValues(); 
 
     
 
    } 
 

 
    onRowClick(event: any, id: number) { 
 
     console.log(event.target.outerText, id); 
 
    } 
 
    myFunc() { 
 
     console.log("edit called"); 
 
    } 
 
    myCancel() { 
 
     this.TableValues = this._tableService.getValues(); 
 
    } 
 
    mySubmit() { 
 
     console.log("Submit called"); 
 
     //here need to create a json file to save the table data for approval 
 
    } 
 
    
 
}

所有帮助将不胜感激。

我需要将数据保存在JSON文件中。编辑完数据后，requiremnt将此批量数据更改添加到sql数据库。

Answer 1

我已通过下述方法解决了这一：

第一步：收集的初始表中的数据为JSON。 第2步：捕获另一个json中的html表值。步骤3：将两个json与键和值进行比较。如果值存在差异，则将其存储在具有所需详细信息的json中。

这按预期工作，并感谢您的想法。