Question

我在Angular 4或PrimNG Datatables模块中检测到了一个错误。

我有一个简单的观点：

<span *ngFor="let node of nodes">{{node.label}}</span> //works with case 1,2,3 and 4

<p-dataTable [value]="nodes"> //works with case 1, 2, and 3 (but not with 4!)
     <p-column field="label" header="Label"></p-column>
</p-dataTable>

和组件中的代码：

private nodes:any[] = []

ngOnChanges() {
   //case 1 -> ok
   //this.nodes.push({label: 'foo'})

   //case 2 -> ok
   //this.nodes = [{label: 'foo'}]

   this.someService.getAll().subscribe(                     
        records => {  
             //case 3 ->ok
             //this.nodes = [{label: 'foo'}]

             //case 4 -> BUG
             //this.nodes.push({label: 'foo'}) //datatable is not updated
        }
   )
}

当我使用未注释的情况1,2或3运行此代码时，一切正常但是当我尝试运行案例4（与案例1相同但在服务解析后） - 初始化数据表似乎没有看到更改。在Angular 2中我没有这样的问题。你能解释一下这里发生了什么吗？：）

此致

Answer 1

你应该在angular2和angular4中有相同的行为。事实上，它不是一个错误，它是预期的行为。它与角度检测如何变化有关。要检测角度变化，只需执行<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border='1'> <thead> <tr> <th class='not-clickable'>Should not be clickable</th> <th>Should be clickable</th> <th>Should be clickable</th> </tr> </thead> <tbody> <tr> <td class='not-clickable'><input type="checkbox"></td> <td>Content that should be clickable</td> <td>Content that should be clickable</td> </tr> </tbody> </table>。

在你的情况1中它起作用，因为changeDetection是由ngOnChange本身触发的。

但是在你的情况4中你只需要为数组添加一个值而不改变数组===的引用。

对于其他情况，您将引用更改为nodes，以便角度能够检测到更改。

我建议你看一下这个答案，它有更多细节：Angular2 change detection: ngOnChanges not firing for nested object

Angular 4 - 使用PrimNG Datatable检测到错误

1 个答案: