Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 使用 Angular Material DataTable 时 Angular 组件的 ngOnInit 中的 SetTimeOut 函数

In lại 作者：行者123 更新时间：2023-11-30 14:22:43 25 4
mua khóa gpt4 Nike

我正在检查我现有项目之一的 Angular 代码，并在下面的代码片段中找到。我们正在使用 Angular material datatable 在页面上呈现 View 

export class Component implements OnInit,AfterViewInit{

  private dataSource: MatTableDataSource = 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; 
  }

}

我的问题是:

1) 由于 this.service.getData() 返回一个 Có thể quan sát được 并且 subscribe 将在 HttpResponse< 时被异步调用 可用， setTimeout 函数内的操作是否会仅在 subscribe 方法被调用后被调用？

2) 我已经看到 ngAfterViewInit 方法也包含与 ngOnInit 方法中的 setTimeout 方法完全相同的代码

3) 但是当这个方法被调用时 (ngAfterViewInit) , this.products 仍然是 NULL 表明订阅还没有被调用 '

4) 这就是 setTimeout hiện hữu ngOnInit 方法中被调用的原因吗？

5)如果是这种情况，ngAfterViewInit 方法有什么用？

1 Câu trả lời

1) 这取决于。订阅仅在操作完成时执行代码。因此，当 this.service.getData() 完成其工作时。 setTimeout 在延迟后完成这项工作。如果订阅需要的时间少于 setTimeout，它将首先执行。

2) 也许您试图注意到函数何时执行？

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

4) 您应该始终避免使用 settimeout(仅用于调试目的)。

biên tập:

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;

}`

让我们稍微简化一下这段代码:

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!");
}

这段代码的输出将是:

世界!你好，

但为什么呢？

Đó là bởi vì observable 模式。

您可以想象当您与两个人同行时:一个懂英语，一个不懂英语。所以即使你说“你好吗？”首先是对不懂英语的人，他需要时间来理解你说什么并回答你。同时，另一个人(非常懂英语)立即回答你。

functionAVàfunctionB的例子是一样的。 FunctionA chỉ một在订阅捕获到某些内容时执行。这就是为什么它不首先被解雇的原因。你可以看到在这里放置了一个调试点:

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);
        }

哪个函数会先执行？

剧透:你不可能知道的。

如果您想知道为什么，这很简单:您确切知道函数 B 将在 500 毫秒后调用，但您无法知道需要多少时间使用订阅才能准备就绪。所以如果你运气好，你的订阅通常需要大约 500 毫秒才能完成，你可以尝试重新加载页面几次，有时你会看到 Hello, world!，有时你会看到 world !你好，.

以更好的方式回答您的问题:我真的不知道您为什么要这样放置代码，根本不知道。

ngAfterViewInit 是一个生命周期，在 ngOnInit 之后调用，并在 Angular 完全初始化组件 View 后执行逻辑。

关于javascript - 使用 Angular Material DataTable 时 Angular 组件的 ngOnInit 中的 SetTimeOut 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52479205/

25 4 0
Bài viết được đề xuất: javascript - export default something() 意思
Bài viết được đề xuất: C 空指针作为参数
Bài viết được đề xuất: c# - 无效的对象名称错误 - EntityFrameworkCore 2.0
Bài viết được đề xuất: c - 指向整数的指针
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com