时间戳

首页 > 解决方案 > Primeng Inputtext：取消按钮功能

angular - Primeng Inputtext：取消按钮功能

问题描述

我在 Angular 4 上工作，我正在使用 primnginputtext和dataTable. 我的页面显示了一个带有键及其值的表格，我的要求是当我单击edit按钮时，其中的value字段dataTable将开始出现在文本字段中。当我cancel应该撤消所有操作并显示文本字段的原始值时，当我单击保存时，我将进行服务调用以保存它。

我已经完成了，Save但cancel我无法弄清楚如何继续前进。谁能指导我如何实现取消按钮功能？

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

]

标签： angulartypescriptprimengcancel-button

解决方案

当您subscribing打开时success store it in a variable（或者您可以根据需要将其存储在两个或多个变量中）并且此变量将存储数据，除非您自愿更改它或重新刷新页面。所以，当你click on cancel assign the data stored in the variable to datatable.

推荐阅读