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>

当点击Add in Footer时，我发了一个事件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 documentations

Answer 2

您可以执行以下操作：

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

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

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

2 个答案: