如何在 angular 组件的模板中访问服务的变量

Question

我有一个服务，我向 api 发出请求并获取数据。 然后在 .ts 文件中，我将该数据存储在服务变量中。 现在，当我尝试访问该组件 xq 的 .html 中的服务变量时，问题出现了，该变量未在 .ts 中定义，也就是说，它不是组件而是服务。 如何从多个组件访问此服务变量？

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) }); } }

这是您调用该服务并将数据保存在服务变量中的组件的代码：

 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(){ } }

我希望能够访问多组件 .html 模板中的服务数组。 我怎么能做到？ 我已经阅读了 observables 和使用 BehaviorSubject 的内容，但我对 observables 的理解比我读过的要多，我不知道该怎么做。 在此先感谢任何可以帮助我的人，我将不胜感激。

Answer 1

将您的服务公开为constructor(public hostlistService: HostlistService)然后在模板中您可以执行以下操作：

<div *ngFor="let data of this.hostlistService.inmuebles">
  <span>{{data}}</span>
</div>

简而言之，在内部模板中使用this.hostlistService.inmuebles进行访问。

Answer 2

确实需要包括“这个”。 在模板中，只是“hostlistService.inmuebles”。