Service undefine无法读取Angular 7中未定义的属性“saveFormJson”

Question

这里的按钮是动态的，我在构造函数中注入服务，并且还绑定为提供者，然后当我调试它服务得到未定义并显示错误，如无法读取属性“saveFormJson”。

在这里我提到代码所以在这个组件文件中我有一个操作按钮，当点击事件触发器我想要使用那个我得到null的服务。

component.ts

import { Component, OnInit } from '@angular/core';
import { config, defaultOptions, defaultI18n } from './config';
import { FormBuilderCreateor } from './form-builder';
import I18N from './mi18n';
import { routerTransition } from '../../router.animations';
import {DataService} from '../formsList/services/data.service';

@Component({
    selector: 'app-formBuilder',
    templateUrl: './formBuilder.component.html',
    styleUrls: ['./formBuilder.component.scss' ],
    animations: [routerTransition()],
    providers: [DataService]

})


export class FormBuilderComponent implements OnInit {
  public myService: any;
  constructor(private dataService: DataService){}

  formBuilder: any;
    ngOnInit(): void {
      initJq();
      var actionButtons = [
        {
          id: "smile",
          className: "btn btn-success",
          label: "😁",
          type: "button",
          events: {
            click: function () {
              this.dataService.saveFormJson("[{}]");
            }
          }
        }
      ];
      this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ actionButtons: actionButtons});
      console.log(this.formBuilder);
    }
}

在这里我提到服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { FormTemplate } from '../models/formTemplate';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';

@Injectable()
export class DataService {
  private readonly API_URL = 'http://localhost:61831/api/FormTemplates/';

  constructor(private httpClient: HttpClient,
    private toasterService: ToastrService) { }

saveFormJson(formJson: JSON): void {
      this.httpClient.post(this.API_URL +"/SaveFormJson ",formJson).subscribe(data => {
        this.toasterService.success('Form Builder Successfully created', "Form Builder");
      },
        (err: HttpErrorResponse) => {
          this.toasterService.error('Error occurred. Details: ' + err.name + ' ' + err.message);
        });
    }
}

这里我提到module.ts文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FormBuilderRoutingModule } from './formBuilder-routing.module';
import { FormBuilderComponent } from './formBuilder.component';
import { PageHeaderModule } from '../../shared';
import { DataService } from '../formsList/services/data.service';

@NgModule({
  imports: [CommonModule, FormBuilderRoutingModule, PageHeaderModule, HttpClientModule ],
  declarations: [FormBuilderComponent],
  providers: [DataService]
})
export class FormBuilderModule {}

所以请指导我在组件文件中使用服务的正确方法。谢谢

Answer 1

问题出在这里。请使用=>，因为this箭头函数没有自己的this，它指向类this。 如果你使用function然后它有自己的this，它不能访问类this

events: {
    click: () =>  { // change to arrow function
      this.dataService.saveFormJson("[{}]");
    }
}

Answer 2

更改代码如下：

this.myService.saveFormJson("[{}]");到this.dataService.saveFormJson("[{}]");