Question

我的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方法的某个地方，但是我和Google都无法怀疑我在做什么错。

Answer 1

您的服务应返回一个可观察到的值，以使其正常工作。根据您当前的代码，您不会从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;
          });
  }

}

希望有帮助。

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

1 个答案: