服务未定义无法读取 Angular 中未定义的 属性 'saveFormJson' 7

Question

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

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

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.myService.saveFormJson("[{}]"); 到 this.dataService.saveFormJson("[{}]");

Answer 2

问题出在这里。请使用 => 因为 this 箭头函数没有自己的 this 并且它指向 class this.
如果你使用 function 那么它有自己的 this 并且它无法访问 class this

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