如何从父控制器中的服务调用 http post 方法

Question

我的 http 方法 returns 包含在我的组件中时会产生结果，但当从位于上一级目录的服务调用时 return 不会产生任何结果。

我已经检查了控制台，没有错误。我已经尝试打印到控制台，它在服务中工作（returns 所需的数据），但在子组件中运行时不会。

这是我要构建的服务：


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 文件只是 return 使用 *ngFor 循环对名称值进行设置。

当从服务运行时，没有 returned 并且控制台中没有错误报告。

我怀疑问题出在我如何从组件调用 fetchList 方法的某个地方，但是 google 和我都无法弄清楚我做错了什么。

Answer 1

您的服务应该 return 可观察到才能正常工作。根据您当前的代码，您没有 returning 来自 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;
    }));        
  }
}

现在在组件中订阅可观察的 return 从 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;
          });
  }

}

希望对您有所帮助。

如何从父控制器中的服务调用 http post 方法

How to call a http post method from a service in a parent director

angular8