将数据从服务发送到可观察的Get请求 [英] Send data from service to observable Get request
本文介绍了将数据从服务发送到可观察的Get请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是Angular和Observables的新手.我有一个服务,该服务接收要传递给我的可观察对象的URL,并在每次通过NgFor将新URL传递给它时呈现数据.任何例子都会有所帮助.请帮什么忙,似乎没有用.预先感谢
I am new to Angular and Observables. I have a service that receives a URL I want to pass to my observable and render data every time a new URL is passed to it with NgFor. Any example would help. Please help nothing seems to work. Thanks in advance
服务文件
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Event } from '../event/event.interface';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ClientService {
eventUrl ;
constructor(private http: HttpClient) {
}
receiveEvent(eventId){
this.eventUrl = eventId;
console.log(this.eventUrl)
}
renderEvent(eventUrl): Observable<Event[]>{
return this.http
.get<Event[]>(eventUrl)
}
正在接收组件文件
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ClientService } from '../service/clientService';
import { HttpParams, HttpClient } from '@angular/common/http';
@Component({
selector: 'hero-review',
templateUrl: './review.component.html',
styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit {
public events = [];
constructor(private _clientService: ClientService) {
}
ngOnInit() {
this._clientService.renderEvent('Need to be dynamic URL').subscribe(data => this.events = data);
}
}
SENDING COMPONENT文件
SENDING COMPONENT file
sendEvent(eventId){
let reqUrl = "myEndpoint" + eventId;
this._clientService.receiveEvent(reqUrl);
}
推荐答案
// This sample using angular 9/10
// Component name: list.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { NgZone} from '@angular/core';
import {HttpServiceService} from './../http-service.service';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
constructor(
private http: HttpServiceService,
private zone: NgZone
) { }
brews: object;
ngOnInit(): void {
this.http.getPeople().subscribe(data => {
this.brews = data;
alert(JSON.stringify(this.brews));
console.log(this.brews);
});
}
}
//--------------------------------
// This is my http service
// Component Name: http-service.service.ts
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HttpServiceService {
constructor() { }
getPeople(): Observable<any>{
const myNameArray = [{
firstName: 'Algem',
lastName: 'Mojedo',
age: 63
}];
return of(myNameArray);
}
}
//--------------------------
// should display in alert
localhost:4200 says
[{"firstName":"Algem","lastName":"Mojedo","age":"60"}]
Happy coding..
这篇关于将数据从服务发送到可观察的Get请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文