angular 4中的primeng p-datatable双向绑定问题答案

【问题标题】：primeng p-datatable two way binding issue in angular 4angular 4中的primeng p-datatable双向绑定问题
【发布时间】：2017-06-27 19:43:05
【问题描述】：

我有一个如下所示的数据表（使用primeng数据表）

<p-dataTable   [value]="gridData" [editable]="true"   >
<p-header>Extraction Fields Setup</p-header>
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" 
[sortable]="true" [editable]="col.edit" [style]="{'overflow': 
'visible','width':''}">
</p-column>
<p-footer>
<div class="ui-helper-clearfix" style="width:100%"><button type="button" 
pButton icon="fa-plus" style="float:left" label="Add" 
(click)="showDialogToAdd()">Add</button>
</div>
</p-footer>
</p-dataTable>

当点击在页脚中添加时，我触发了一个事件 showDialogToAdd() 代码，如下所示。

    let newBatchObj = {};
    newBatchObj['extractionType'] = '11';
    newBatchObj['fieldname'] = '1';
    newBatchObj['fielddata'] = '1';
    newBatchObj['Anchor'] = '1';
    newBatchObj['bRules'] = '1';
    this.gridData.push(newBatchObj);

但是 p-datatable 没有显示新增的值

【问题讨论】：

标签： primeng-datatable

【解决方案1】：

您可以将不可变属性更改为 false 来解决您的问题。所以你的 HTML 应该如下所示：

<p-dataTable [immutable]="false" [value]="gridData" [editable]="true">
// your code...
</p-dataTable>

我找到了解决方案：StackOverflow question

更多详情：PrimeNG documentations

【讨论】：

【解决方案2】：

你可以这样做：

this.gridData = [...this.gridData,newBatchObj];

使用...（扩展运算符）来避免改变对象。

【讨论】：