Служба undefine Невозможно прочитать свойство 'saveFormJson' из неопределенного в Angular 7 - PullRequest
Новая
       22

Служба undefine Невозможно прочитать свойство 'saveFormJson' из неопределенного в Angular 7

0 голосов
/ 28 марта 2019

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

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

Ответы [ 2 ]

1 голос
/ 28 марта 2019

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

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

0 голосов
/ 28 марта 2019

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

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