Angular 7 Component Observable Именованная и Анонимная функция - PullRequest
Новая
       5

Angular 7 Component Observable Именованная и Анонимная функция

0 голосов
/ 03 декабря 2018

Я создал компонент 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, это должно работать.Однако, поскольку это машинописный текст, может быть какое-то особое условие, о котором я не знаю, которое влияет на способ обработки именованных и анонимных обратных вызовов.

Если вы можете объяснить разницу, пожалуйста, сделайте это.

1 Ответ

0 голосов
/ 03 декабря 2018

Речь идет не о TypeScript, а о проблеме с чистым JavaScript.Передача this.setup_vendor_list в качестве аргумента аналогична передаче 

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

, которая не такая же, как 

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

, в которую вы, похоже, верите.

Это также не касается именованных и анонимных функций: обратите внимание, что оба моих примера анонимны.Однако только одна - это функция стрелки .

Разница, которая влияет на вас, заключается в том, как this разрешается внутри этих функций, о которых вы можете прочитать подробнее в Какключевое слово "this" работает? .

Два самых быстрых обходных пути: 

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