テーブルに編集された古い値と新しい値を角度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ファイルに保存する必要があります。データを編集した後、この一括データ変更をSQLデータベースに追加することが必要です。

Answer 1

私は法の下にこれをすることによって解決されています

ステップ1：JSONとして初期テーブル・データを収集しました。 ステップ2：別のjsonでキャプチャされたhtmlテーブルの値。 ステップ3：キーと値の両方とjsonを比較します。値に差異がある場合は、必要な詳細とともにjsonに格納されます。

これは期待通りに機能し、あなたの考えに感謝します。