angular - 服务未定义无法读取 Angular 7 中未定义的属性“saveFormJson”
问题描述
这里的按钮是动态的,我在构造函数中注入了服务,并且还绑定为提供者,然后当我调试它时,服务未定义并显示错误,例如无法读取属性“saveFormJson”。
在这里我提到了代码,所以在这个组件文件中我有一个动作按钮,当点击事件触发时我想使用那个我得到空的服务。
组件.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("[{}]");
推荐阅读
- firebase - 是否可以获得firebase数据库的结构?
- python-3.x - 无法在 AWS ElasticBeanstalk 上运行后台工作程序
- c++ - 在 c++ 的多个线程中写入不同的 c 数组项是否线程安全?
- java - REST API 的幂等性
- css - CSS动画问题
- python - 从现有 Torchvision 数据集创建精简数据集
- python - PyMC3 分层二项式模型 - 调整后的分歧
- encoding - 使用 exiftool 编写 UTF8 编码的 IPTC 标签
- spring-boot - Spring Boot - 使用 H2 进行单元测试和快速开发(使用 Spring 配置文件)
- batch-file - 将文件编译成一个自解压安装程序