无法从我的API后端(Angular)订阅数据



我是Angular和ionic的新手,我必须开发一个可以连接到后端并获取用户数据的应用程序。该应用程序能够提取用户数据,但不能将其保存在变量中使用订阅方法。

PeopleService:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ReplaySubject } from 'rxjs';
import {map} from 'rxjs/operators';
@Injectable({
  providedIn: 'root',
})
export class PeopleService {
      public activeProject:ReplaySubject<any> = new ReplaySubject(1);
      public people: any;
  constructor(public http: HttpClient ){
    console.log("Ciaooo");
  }
  getPeople() {
        this.http.get('.....................').pipe(map(res => res)).subscribe(res => this.activeProject.next(res));
        return this.activeProject;
  }
}

主:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Component, OnInit } from '@angular/core';
import {PeopleService} from '../../people-service.service';
import { ReplaySubject } from 'rxjs';
console.log("ouu");
@Component({
  selector: 'app-start-p',
  templateUrl: './start-p.page.html',
  styleUrls: ['./start-p.page.scss'],
  providers: [PeopleService]
})
export class StartPPage implements OnInit {
  //public people : any;
   public people : any;
  constructor(public peopleService : PeopleService){
    console.log("Start p page costruito richiamo loadPeople");
  }
  ngOnInit() {
    this.people = null;
    console.log("loadPeople avviato, provo a inviare richiesta pacchetti a peopleService.getPeople");
    this.peopleService.getPeople();
 
    this.peopleService.activeProject.subscribe(active => {this.people = active, console.log(active)});
    console.log(this.people);
  }
}

返回json就是这样:

{"people": [{"gender":"female","name":{"title":"miss","first":"willemien","last":"heslinga"},"email":"willemien.heslinga@example.com"},{"gender" : "male", "name":{"title":"monsieur","first":"bernard","last":"olivier"},"email":"bernard.olivier@example.com"}]}

我的应用程序可以读取JSON文件,但无法保存它。运行控制台。log,但无法在此中活跃。

我会尝试重组此设置以使其简单并使其正常工作。正如评论中提到的那样,可以直接处理getPeople()。看起来如下。确保从RXJS导入Observable

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
private getPeople():Observable<any> {
 return this.http.get(//filler details//).pipe(map(data => data)
 );
}

请注意,以上功能设置为返回"可观察到",这意味着您可以直接订阅它的组件,看起来像是如此。

this.peopleService.getPeople().subscribe(data => {
  console.log(data); // is good, should show you people.
}, error => {
  console.log(error); // HttpError will provide error and type.
});

这可以消除涉及subject的复杂逻辑,同时为您提供所需的功能。任何问题都发表评论。br。

最新更新