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及其指向类this的指针。
如果您使用function，则它具有自己的this，并且无法访问类this

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

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

2 个答案: