如何在 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”。