Question

我创建了一个Angular 7组件，该组件具有可从angular服务中观察到的特性。我正在使用它将数据从远程服务绑定到我的页面之一上的列表。效果很好。但是，我注意到的一件事是，如果使用命名函数而不是匿名函数，则订阅异步回调中的数据不会绑定到页面上的列表。

这是当前匿名回调有效的示例

public constructor(private vendorApiService: VendorApiService,
    private eventMessagingService: EventMessagingService) {

    this.vendorApiService.getVendors().subscribe(
      (data) => {
        this._vendor = data;
        this.dataSource = new MatTableDataSource<Vendor>(this._vendor);
        this.dataSource.paginator = this.paginator;
      });
    this._displayedColumns = ['id', 'code', 'name', 'edit'];
}

我想将其转换为此。但是，这不起作用：

public constructor(private vendorApiService: VendorApiService,
  private eventMessagingService: EventMessagingService) {

    this.vendorApiService.getVendors().subscribe(
      this.setup_vendor_list);
    this._displayedColumns = ['id', 'code', 'name', 'edit'];
}

private setup_vendor_list(data) {
  this._vendor = data;
  this.dataSource = new MatTableDataSource<Vendor>(this._vendor);
  this.dataSource.paginator = this.paginator;
}

根据我对Javascript的了解，这应该可以工作。但是，由于这是打字稿，所以可能有一些特殊的条件我不知道，这会影响命名和匿名回调的处理方式。

请您解释一下区别。

Answer 1

这与TypeScript无关，仍然是纯JavaScript问题。通过this.setup_vendor_list作为参数与通过

function (...args) { return this.setup_vendor_list(...args) },

与不同相同

(...args) => this.setup_vendor_list(...args),

您似乎相信。

这也不是关于命名函数还是匿名函数：请注意我的两个示例都是匿名的。但是，只有一个是箭头功能。

影响您的差异是在这些函数中解决this的方式，您可以在How does the "this" keyword work?中了解更多信息。

两个最快的解决方法：

subscribe(this.setup_vendor_list.bind(this))
subscribe(data => this._setup_vendor_list(data))

Angular 7 Component Observable命名与匿名函数

1 个答案: