javascript - 如何正确地将功能从 component.ts 移动到服务文件?
问题描述
我在我的 component.ts 中编写了一个发送 PUT 请求的函数。它可以正常工作,但我想将该功能移至 service.ts 文件。我移动了它,但它不起作用。当我单击“保存”时,它在控制台中显示错误:
FormsComponent.html:32 错误类型错误:_co.editForm 不是 Object.eval 的函数 [as handleEvent] (FormsComponent.html:32) at handleEvent (core.js:23008) at callWithDebugContext (core.js:24078) at Object .debugHandleEvent [as handleEvent] (core.js:23805) at dispatchEvent (core.js:20457) at core.js:20904 at HTMLButtonElement。(platform-browser.js:993) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 在 Object.onInvokeTask (core.js:17279) 在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) View_FormsComponent_0@FormsComponent.html:32 proxyClass@compiler.js:18234 push../node_modules/@angular /core/fesm5/core.js.DebugContext_.logError@core.js:24040 推..
这是我的 forms.component.ts 文件:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormService } from './forms.service';
import { form } from './form-interface';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {
formsUrl = "https://jsonplaceholder.typicode.com/posts";
id: any;
form: form = {
id: 0,
userId: 0,
title: '',
body: ''
};
constructor(private formService: FormService ,private route: ActivatedRoute,
private router: Router, private http: HttpClient) { }
ngOnInit() {
this.id=this.route.snapshot.params['id'];
this.formService.getForms(this.id).subscribe(
(forms: any) => {
this.form = forms[0];
console.log(this.form);
}
);
}
deleteForm() {
this.http.delete(this.formsUrl + "/" + this.form.id)
.subscribe(
data => {
console.log("DELETE Request is successful ", data);
},
error => {
console.log("Error", error);
}
);
}
}
这是我的 forms.service.ts 文件:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { form } from './form-interface';
@Injectable({
providedIn: 'root'
})
export class FormService {
formsUrl = "https://jsonplaceholder.typicode.com/posts";
form: form = {
id: 0,
userId: 0,
title: '',
body: ''
};
constructor(private http: HttpClient) { }
getForms(id) {
return this.http.get('https://jsonplaceholder.typicode.com/posts'
+ "?id=" + id)
}
editForm() {
fetch(this.formsUrl + "/" + this.form.id, {
method: 'PUT',
body: JSON.stringify(this.form),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json));
}
}
这是我的 HTML 文件:
<div class="forms container">
<form #postForm="ngForm">
<div class="form-group">
<label for="title">Title</label>
<input [(ngModel)]="form.title"
name="title"
id="title"
type="text"
class="form-control"
>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea [(ngModel)]="form.body"
name= "body"
id="body"
cols="30"
rows="10"
class="form-control"
></textarea>
</div>
<button class="btn btn-success" (click) = editForm()>Save</button>
<button class="btn btn-danger pull-right" (click) = deleteForm()>Delete</button>
</form>
</div>
解决方案
您不能调用editForm()
模板,因为它在您的组件中不存在。如果您想从服务中调用该函数,请formService.editForm()
改用
但在这种情况下,您需要formService
公开,所以使用public formService: FormService
而不是private formService: FormService
.
您还可以在组件中克隆该功能,因此您无需更改模板并将服务公开,如public editForm = formService.editForm
或者
editForm() {
return this.formService.editForm();
}
推荐阅读
- javascript - 如何将对象转换为对象数组
- r - 抑制 ggplot 中的 0 值
- r - 两条斜线,一条用于最小点,另一条用于R中散点图中的最大点
- hive - 为什么这个子查询 hiveql 不起作用?
- javascript - 我可以在javascript中用字符串名称调用一些帮助函数吗
- typo3 - PHP strict_types 和与不可见 TYPO3 记录的关系
- django - django频道安装错误
- python - 将数据框中的字典列表转换为字符串列表 - 熊猫
- php - 无法通过 Phonegap 和 PHP 将图像上传到 Linux 服务器
- php - 将多个外部 MSSQL 表中的多个组合 PHP 表单数据添加到一个主表中