angular - 不能从同一个类中的另一个方法调用方法

Question

我正在开发一个 Angular 7 应用程序，在这个应用程序中，我在一个 contenteditable div 中使用了一个“mention”插件。当有人从下拉列表中选择一个值时，将调用一个方法，我可以获得所选项目，但问题是我无法在将所选项目发送到服务器的同一类中调用另一个方法。我收到以下错误:

我用的mentions库是这样的:

https://github.com/dmacfarlane/angular-mentions

这是我的错误

PageContentComponent.html:4 ERROR TypeError: this.createBlock is not a function

这是我的课

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { BaseComponent } from '../../../../shared/components/base.component';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

@Component({
  selector: 'app-page-content',
  templateUrl: './page-content.component.html',
  styleUrls: ['./page-content.component.scss']
})
export class PageContentComponent extends BaseComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute, public api: HttpClient) { super(); }

  public path = 'pages';
  public model: any;

  ngOnInit() {}

  mentionSelect(selection): any {
    this.createBlock(selection);
    return selection.label;
  }

  createBlock(event) {
    this.isRunning = true;
    this.api.post(this.baseURL + 'blocks', {
        otype: event.type
      }).subscribe(
      data => {
        this.isRunning = false;
        this.collection.splice(parseInt(event.index, 10) + 1, 0, data);
      },
      error => {
        console.log('Error', error);
        this.isRunning = false;
      }
    );
  }

}

为什么我不能运行该方法？它存在并且位于与 mentionSelect 相同的类中。

Answer 1

与调用mentionSelect时this的作用域有关。将其更改为箭头函数，以便正确捕获 this。这并非总是必要的，但在向外部库注册事件时可能会发生。

mentionSelect = (selection): any => {
    this.createBlock(selection);
    return selection.label;
}

createBlock = (event) => {
    ....