[英]how can I access the variables of a service in the template of a component in angular
I have a service where I make a request to an api and I get the data.我有一个服务,我向 api 发出请求并获取数据。 then in the .ts file, I store that data in a service variable.
然后在 .ts 文件中,我将该数据存储在服务变量中。 now the problem arises when I try to access that service variable in the .html of that component xq that variable is not defined in the .ts, that is, it is not the component but the service.
现在,当我尝试访问该组件 xq 的 .html 中的服务变量时,问题出现了,该变量未在 .ts 中定义,也就是说,它不是组件而是服务。 How could I access this service variable from several components?
如何从多个组件访问此服务变量?
este es el codigo de mi servicio: este es el codigo de mi servicio:
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders} from '@angular/common/http'; import { Inmueble } from '../modelos/inmueble'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class HostlistService { inmuebles: Inmueble[] = []; cabecera = { 'Accept': 'application/json', 'Authorization': "" } parametros = { 'grant_type':'client_credentials', 'client_id': 3, 'client_secret': '' } constructor(public http: HttpClient) { } obtenerToken(){ return this.http.post<any>('https:',this.parametros); } obtenerInmuebles(resultToken){ this.cabecera.Authorization=resultToken.token_type+" "+resultToken.access_token; console.log("----->"+this.cabecera.Authorization); return this.http.get<any>('',{ headers: new HttpHeaders(this.cabecera) }); } }
This is the code of the component where you called that service and saved the data in a service variable:这是您调用该服务并将数据保存在服务变量中的组件的代码:
import { Component, OnInit, Input } from '@angular/core'; import { HostlistService } from '../servicios/hostlist.service'; import { Inmueble } from '../modelos/inmueble'; import { mergeMap } from 'rxjs/operators'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit { z: number=0; url: string = "URL"; constructor(private hostlistService: HostlistService) { } ngOnInit() { this.hostlistService.obtenerToken() .pipe( mergeMap(resultToken => { //do whatever you want to do with the token //ie Save the token in the localstorage like this - localStorage.setItem("token",resultToken.access_token); return this.hostlistService.obtenerInmuebles(resultToken); }) ) .subscribe( result => { this.cargarJson(result); },error =>{ console.log(error); } ); } /*this.hostlistService.getInmuebles().subscribe( result => { console.log("-----------_>"+result.data); },error => { console.log(error); } );*/ /* anteriorInmueble(){ (this.i<=0) ? this.i=680: this.i=this.i-5; console.log("AntIn VALOR DE I: "+this.i); siguienteInmueble(){ (this.i>=680) ? this.i=0: this.i=this.i+5; console.log("SigIn VALOR DE I: "+this.i); }*/ // metodo para cargar el Json recibido de la petición cargarJson(result){ var foto1,foto2: string; foto1 = "fot0", foto2 = "fot"; var precio: number=0; var i,j: number=1; for(const item of result.data) { var pos: number=0; //variable que define la posicion a almacenar en el vector pos =0; console.log("POS----->"+pos); var inmueble = new Inmueble(); inmueble.fotos = []; inmueble.nombre = item.nomb_prod_c; inmueble.id = item.id_c; inmueble.estacionamiento = item.estan_c; inmueble.baño = item.banof_c; precio = item.price; precio = Math.round(precio*100)/100; inmueble.precio = precio; (item.fot01_c != "") ? (inmueble.fotos[pos]="fot01_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot02_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot03_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot04_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot05_c", pos++): (inmueble.fotos[pos]=""); (item.fot01_c != "") ? (inmueble.fotos[pos]="fot06_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot07_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot08_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot09_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot10_c", pos++): (inmueble.fotos[pos]=""); (item.fot01_c != "") ? (inmueble.fotos[pos]="fot11_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot12_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot13_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot14_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot15_c", pos++): (inmueble.fotos[pos]=""); (item.fot01_c != "") ? (inmueble.fotos[pos]="fot16_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot17_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot18_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot19_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot20_c", pos++): (inmueble.fotos[pos]=""); if(pos == 0){ inmueble.fotos[pos]="n"; } this.hostlistService.inmuebles.push(inmueble); //se almacena el inmueble en el vector de inmuebles } //console.log("************:"+this.inmuebles[1].fotos[0]); } anteriorInmueble(){ (this.z<=0)? this.z=680: this.z=this.z-1; } siguienteInmueble(){ (this.z>=680)? this.z=0: this.z=this.z+1; } consultarPais(){ } }
I want to be able to access the service array in the multi-component .html template.我希望能够访问多组件 .html 模板中的服务数组。 How could I do it?
我怎么能做到? I have read that with observables and using BehaviorSubject but I understand absolutely nothing of observables for more than I have read, I do not know how to do.
我已经阅读了 observables 和使用 BehaviorSubject 的内容,但我对 observables 的理解比我读过的要多,我不知道该怎么做。 Thanks in advance to anyone who can help me, I would greatly appreciate it.
在此先感谢任何可以帮助我的人,我将不胜感激。
Make your service public,as constructor(public hostlistService: HostlistService)
then inside the template you can do something like, 将您的服务公开为
constructor(public hostlistService: HostlistService)
然后在模板中您可以执行以下操作:
<div *ngFor="let data of this.hostlistService.inmuebles">
<span>{{data}}</span>
</div>
In short inside template use this.hostlistService.inmuebles
to access it. 简而言之,在内部模板中使用
this.hostlistService.inmuebles
进行访问。
Do need to include “this.”确实需要包括“这个”。 In the template, just “ hostlistService.inmuebles”.
在模板中,只是“hostlistService.inmuebles”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.