标签: angular2-docheck

为什么我们需要`ngDoCheck`

我似乎无法弄清楚为什么我需要ngDoCheck生命周期钩子而不是简单的通知,特别是如何在其中编写代码与变化检测有关.我发现的大多数示例都显示了无用的示例,如此示例,具有一堆日志记录功能.

此外,在生成的类中,我没有看到它被用于除简单通知之外的其他内容:

conmponent/wrapper.ngfactory.js

Wrapper_AppComponent.prototype.ngDoCheck = function(view,el,throwOnChange) {
  var self = this;
  var changed = self._changed;
  self._changed = false;
  if (!throwOnChange) {
    if (changed) {
      jit_setBindingDebugInfoForChanges1(view.renderer,el,self._changes);
      self._changes = {};
    }
    self.context.ngDoCheck(); <----------- this calls ngDoCheck on the component
                                           but the result is not used 
                                           anywhere and no params are passed
      }
      return changed;
    };
Run Code Online (Sandbox Code Playgroud)

angular2-docheck angular

38
推荐指数
4
解决办法
3万
查看次数

数据源更改时,Angular 2子组件未更新

我已经创建了一个表组件,该表组件会根据传入的配置生成一个表。我知道可能有更好的编写可重用组件的方法,但是现在这就是我所拥有的。

基本上,组件采用带有列和数据源对象的配置,然后将列映射到数据源中的属性。

我的问题是,在某个时候我更改了表的数据源之一,例如,我首先清空了数组。

this.members.datasource = []
Run Code Online (Sandbox Code Playgroud)

然后像这样将新数据推送到数据源上...

for (let member in members) {
            this.members.datasource.push(members[member]);
}
Run Code Online (Sandbox Code Playgroud)

我的问题是,执行此操作时,表不会使用数据源中的新数据进行更新。

我已经在组件中使用了ngDoCheck函数,并且当我更改数据源时确实会触发,但是没有其他反应。

这是所有相关代码和标记...

ip-datatable组件

import { Component, Input, Output, OnInit, EventEmitter, ElementRef, DoCheck } from "@angular/core";

import { ITable } from "./interfaces/index";

@Component({
    selector: "ip-datatable",
    templateUrl: "./ip-dataTable.component.html"
})
export class IpDataTableComponent implements OnInit, DoCheck {
    @Input()
    public config: ITable;
    public tableData: any;

    @Output()
    private onRowClick = new EventEmitter();

    constructor(private elem: ElementRef) {

    }

    public ngOnInit() {
        // TODO: Decide whether or not to make this …
Run Code Online (Sandbox Code Playgroud)

parent-child single-page-application typescript angular2-docheck angular

3
推荐指数
1
解决办法
3359
查看次数