Question

我正在开发Angular 7应用，在此应用中，我在contenteditable div中使用了“提及”插件。当某人从下拉菜单中选择了一个值时，将调用一个方法，我可以获取所选的项目，但是问题是我无法在将所选项目发送到服务器的同一类中调用另一个方法。我收到以下错误：

我使用的提及库是：

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

}

为什么我不能运行该方法？它存在并且与提及选择位于同一类。

Answer 1

在调用this时，它与mentionSelect的范围有关。将其更改为箭头功能，以便正确捕获this。并非总是需要这样做，但是在使用外部库注册事件时可能会发生。

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

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

无法从同一类中的另一个方法调用一个方法

1 个答案: