Question

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

request.component.html

＆＃13;

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

＆＃13;

request.component.ts

＆＃13;

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

＆＃13;

所有帮助将不胜感激。

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

Answer 1

我已通过以下方法解决了这个问题：

Step1：将初始表数据收集为json。 Step2：在另一个json中捕获html表值。 Step3：将json与key和value进行比较。如果值存在差异，则将其存储在具有所需详细信息的json中。

这符合预期，感谢您的想法。

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

1 个答案: