Angular 7 Component Observable Named vs Anonymous 函数

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 Named vs Anonymous 函数

Angular 7 Component Observable Named vs Anonymous function

callback

observable

typescript

angular

angular7