angular8 - 如何从父目录中的服务调用 http post 方法
问题描述
我的 http 方法在包含在我的组件中时会返回结果,但在从位于上一个目录的服务调用时不返回任何结果。
我检查了控制台,没有错误。我曾尝试打印到控制台,该控制台在服务内工作(返回所需的数据),但在子组件内运行时不能。
这是我正在尝试构建的服务:
import { Injectable } from '@angular/core';
import { Resturant } from '../../models/resturant.model'
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class GetResturantsService {
fullListresturants: Resturant[];
constructor(private http:HttpClient) { }
fetchList(){
this.http.get('https://lunchlads.firebaseio.com/posts.json')
.pipe(map(responseData =>{
const postsArray: Resturant[] = [];
for (const key in responseData) {
if (responseData.hasOwnProperty(key)){
postsArray.push({ ...responseData[key], id:key })
}
}
return postsArray;
}))
.subscribe(posts => {
// this.fullListresturants = posts;
});
}
}
这是目录中的一个文件的组件:
import { Component, OnInit } from '@angular/core';
import { Resturant } from '../../../models/resturant.model'
import { GetResturantsService } from '../get-resturants.service'
import { HttpClient } from '@angular/common/http';
//import { map } from 'rxjs/operators';
@Component({
selector: 'app-list-all',
templateUrl: './list-all.component.html',
styleUrls: ['./list-all.component.css']
})
export class ListAllComponent implements OnInit {
fullListresturants: Resturant;
constructor(private http:HttpClient, private listAllResturants:GetResturantsService) { }
ngOnInit() {
this.onfullList();
}
onfullList(){
this.fullList();
}
private fullList(){
// this.http.get('https://lunchlads.firebaseio.com/posts.json')
// .pipe(map(responseData =>{
// const postsArray: Resturant[] = [];
// for (const key in responseData) {
// if (responseData.hasOwnProperty(key)){
// postsArray.push({ ...responseData[key], id:key })
// }
// }
// return postsArray;
// }))
// .subscribe(posts => {
// // this.fullListresturants = posts;
// });
this.listAllResturants.fetchList();
}
}
firebase 后端包含大约 10 条记录,其中包含 name:string、votes:number 和 selected:number 字段。从组件运行时,html 文件只返回带有 *ngFor 循环的名称值。
从服务运行时,不会返回任何内容,并且控制台中不会报告任何错误。
我怀疑问题出在我如何从组件中调用 fetchList 方法的某个地方,但是谷歌和我一直无法弄清楚我做错了什么。
解决方案
您的服务应该返回一个 observable 以使其工作。根据您当前的代码,您不会从GetResturantsService.fetchList()
. 为了让它工作,让我们像这样改变服务:
export class GetResturantsService {
fullListresturants: Resturant[];
constructor(private http:HttpClient) { }
fetchList(){
return this.http.get('https://lunchlads.firebaseio.com/posts.json')
.pipe(map(responseData =>{
const postsArray: Resturant[] = [];
for (const key in responseData) {
if (responseData.hasOwnProperty(key)){
postsArray.push({ ...responseData[key], id:key })
}
}
return postsArray;
}));
}
}
现在在组件中订阅从这样的方法返回的可观察对象fetchList
:
export class ListAllComponent implements OnInit {
fullListresturants: Resturant;
constructor(private http:HttpClient, private listAllResturants:GetResturantsService) { }
ngOnInit() {
this.onfullList();
}
onfullList(){
this.fullList();
}
private fullList(){
this.listAllResturants.fetchList()
.subscribe(posts => {
//DO whatever you want to do with posts
this.fullListresturants = posts;
});
}
}
希望能帮助到你。
推荐阅读
- javascript - 在 mvc JavaScript 中的下拉更改选择上加载列
- html - Angular matdatepicker 未按应有的方式显示
- vb.net - 任何人都可以帮助我了解 WinForms 应用程序中的命令行参数吗?
- reactjs - 状态更改时如何停止在上下文使用者中重新呈现列表项
- progressive-web-apps - URL 栏未隐藏
- c - 如何仅使用 C 中的整数将十六进制转换为十进制
- python - 从字典列表到具有相同值的字典列表
- raspberry-pi - PyBluez over HCI 在 ESP32 的 Raspberry Pi 计算模块上工作异常
- javascript - 如何从 webpack 编译的模板文字中删除 \n 和 \t?
- twilio - 有没有办法调用私有/受保护的 twilio 函数?