Primeng Inputtext: Cancel button functionality

Question

I work on Angular 4 and I am using primgng inputtext and dataTable. My page shows a table with key and its value and my requirement is when I click on the edit button, the value field in the dataTable will start appearing in the text field. When I cancel it should undo all the actions and show the original value of the text field and when I click on save I will make a service call to save it.

I am done with Save but cancel I am not able to figure out how to move ahead. Can any one please guide me how to implement cancel button functionality?

<button>Edit</button>
<button>Cancel</button>
<button>Save</button>

<p-dataTable [value]="fileInfo" [sortField]="sortF" [sortOrder]="sortO" (onSort)="changeSort($event)">
    <p-column field="key" header="Vin" [sortable]="true"></p-column>
    <p-column field="value" header="Year" [sortable]="true">
    <ng-template let-col let-item="rowData">
            <input id="float-input" type="text" size="30" pInputText value-"{{item.value}}">
        </ng-template>
    </p-column>
    <p-footer>
      <button type="button" label="Sort by Year" (click)="changeSort($event)" pButton></button>
    </p-footer>
</p-dataTable>

this.fileInfo = [{
    key: "Name",
    value: "ABC"
},
{
    key: "Age",
    value: "45"
},
{
    key: "Place",
    value: "NY"
},
{
    key: "Book",
    value: "A1"
},
{
    key: "Contact",
    value: "123456"
}

]

Answer 1

When you subscribing then on success store it in a variable(or you can store it in two or more variables based on requirement) and this variable will store the data unless it is changed voluntarily by you or page is refeshed. So, when you click on cancel assign the data stored in the variable to datatable.