我有一个向api请求并获得数据的服务。然后在.ts文件中，我将该数据存储在服务变量中。现在，当我尝试访问该组件xq的.html中的服务变量时，就会出现问题，该变量未在.ts中定义，也就是说，它不是组件而是服务。如何从多个组件访问此服务变量？
服务的历史：
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
//i.e. 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模板中的服务数组。我该怎么办？我已经阅读了可观察变量并使用BehaviorSubject，但是我对可观察变量的了解绝对超过了我所读的内容，我不知道该怎么做。在此先感谢任何可以帮助我的人，我将不胜感激。
答案 0 :(得分：1)
将您的服务公开为constructor(public hostlistService: HostlistService)，然后在模板中您可以执行以下操作，
<div *ngFor="let data of this.hostlistService.inmuebles">
<span>{{data}}</span>
</div>
简而言之，在模板内部使用this.hostlistService.inmuebles进行访问。
答案 1 :(得分：0)
确实需要包含“this”。在模板中，只需“hostlistService.inmuebles”。