代码之家 › 专栏 › 技术社区 › Atul

在使用角材料数据表时,在角组件的ngOnInit内设置超时函数

settimeout angular-material angular javascript

Atul · 技术社区 · 7 年前

我们正在使用 Angular material datatable 在页面上呈现视图

export class Component implements OnInit,AfterViewInit{

  private dataSource: MatTableDataSource<Product> = null;
  @ViewChild(MatPaginator) paginator: MatPaginator; 

  columnsToDisplay = ['productId','productname'];
  constructor(private _service : DataService) { }

  ngOnInit() {

    this._service.getProducts().subscribe(
     ((data : Product[]) => this.dataSource = new MatTableDataSource(data)),
     () => console.log('THIS IS ERROR')
    );
    setTimeout(() => this.dataSource.paginator = this.paginator);
    //this.dataSource.paginator = this.paginator;
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator; 
  }

}

我的问题是:

this.service.getData() 返回一个 Observable 和 subscribe HttpResponse 是可用的, setTimeout 函数将被调用这个方法被调用?

2) 我看到了 ngAfterViewInit 方法还包含与中完全相同的代码 设置超时 中的方法 ngOnInit 方法

(ngAfterViewInit) this.products

4) 这就是原因吗 设置超时 被称为内部 恩戈尼特 方法?

5) 如果是这样的话,这有什么用 ngAfterViewInit 方法?

3 回复 | 直到 7 年前

Nour 7 年前

我将尽量简化描述:

setTimeout 告诉javascript在完成工作之前保留此代码。

回到您的问题:您不知道何时调用setTimeout代码,但理论上它将在订阅之前被调用(javascript引擎比http响应更快)。

如果仅在从http请求获取数据之后才需要初始化某些数据表结构,则应将其放入 subscribe 方法,无需设置超时。

ngAfterViewInit angular用来告诉开发人员在这个阶段 view 准备就绪,可以使用elementRef作为示例。

ngOnInit

Jacopo Sciampi 7 年前

1) 视情况而定。订阅仅在操作完成时执行代码。所以,当 this.service.getData() 已经完成了它的工作。setTimeout在一段延迟后执行该任务。如果订阅需要的时间少于setTimeout,则将首先执行它。

3) AfterViewInit被多次激发。你可以这样检查 if(!!something) 然后执行一些代码。

4) 你应该总是避免使用settimeout(仅用于调试目的)。

编辑:

恩戈尼尼特(){

this._service.getProducts().subscribe(
 ((data : Product[]) => this.dataSource = new MatTableDataSource(data)),
 () => console.log('THIS IS ERROR')
);
setTimeout(() => this.dataSource.paginator = this.paginator);
//this.dataSource.paginator = this.paginator;

}

让我们简单地说一下这段代码:

ngOnInit() {
  this.service.doStuff()
  .subscribe(result => {
    this.functionA();
  },
  err => {
    //Do other stuff in case of an error
  });

  this.functionB();
}

functionA(){
  console.log("Hello,");
}

functionB(){
  console.log("world!");
}

此代码的输出将是:

world!Hello,

但为什么呢?

observable 图案。

你可以想象,当你和两个人走在一起:一个懂英语,一个不懂英语。所以,即使你先对一个不懂英语的人说“你好吗”,他也需要时间来理解你说的话并回答你。同时,另一个懂英语的人马上回答你。

例如 functionA 和 functionB 是一样的。函数被执行只有

ngOnInit() {
      this.service.doStuff()
      .subscribe(result => {
      --->  this.functionA();
      },
      err => {
        //Do other stuff in case of an error
      });

      --->  this.functionB();
    }

希望能解释清楚这一点。

现在让我们继续 ,让我们使用超时:

 ngOnInit() {
          this.service.doStuff()
          .subscribe(result => {
            this.functionA();
          },
          err => {
            //Do other stuff in case of an error
          });

          settimeout(() => {
            this.functionB();
          }, 500);
        }

你不可能知道的。

如果您想知道原因,那么很简单:您确切地知道functionB将在500毫秒后被调用,但是您不知道订阅将花费多少时间来准备。所以如果你很幸运,你的订阅通常需要500毫秒才能完成,你可以尝试重新加载页面几次,有时你会看到 Hello, world! ,有时你会看到 .

以更好的方式回答你的问题:我真的不知道你为什么要这样写代码,简直不知道。

ngAfterViewInit是一个 life-cycle 之后 ngOnInit,并在Angular完全初始化组件视图后执行逻辑。

T. Shashwat 7 年前

1 不,setTimeout将只在subscribe作为其上下文外部调用之前调用一次。

三。

4 ngOnInit生命周期钩子在DOM更新操作之前触发,不会给出任何错误。ngOnInit生命周期钩子在绑定处理后触发。ngAfterViewInit在视图最初呈现时调用,即在创建组件的视图及其子视图之后调用。

5 应在创建组件的视图及其子视图之后调用ngAfterViewInit(),最重要的是在父级的ngAfterViewInit()之前调用子级的ngAfterViewInit()。