Блог

Здесь кнопки являются динамическими, и я ввожу службу в конструктор, а также привязываю как поставщика, затем также, когда я отлаживаю его, служба становится неопределенной и выдает ошибку, например, не удается прочитать свойство «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 {}

  

Поэтому, пожалуйста, подскажите мне, как правильно использовать службу в файле компонента.
Спасибо

Измените код, как показано ниже:

this.myService.saveFormJson("[{}]"); Для this.dataService.saveFormJson("[{}]");

Проблема заключается вот в чем. Пожалуйста, используйте, => потому что this функции со стрелками не имеют своих собственных функций this и они указывают на класс this .
Если вы используете function , то у него есть свой собственный this , и он не может получить доступ к классу this

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