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

Question

我有一个如下所示的数据表（使用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 没有显示新的附加值

Answer 1

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

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

我在以下位置找到了解决方案：StackOverflow question

有关以下内容的更多详细信息：PrimeNG 文档

Answer 2

您可以执行以下操作：

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

使用...(Spread operator) 来避免改变对象。