如何以角度访问组件模板中的服务变量

Posted 2023-02-23

【中文标题】如何以角度访问组件模板中的服务变量

【英文标题】：how can I access the variables of a service in the template of a component in angular

【发布时间】：2019-10-30 15:30:14

【问题描述】：

我有一项服务，我向 api 发出请求并获取数据。然后在 .ts 文件中，我将该数据存储在服务变量中。现在问题出现了，当我尝试访问该组件的 .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
          //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 模板中的服务数组。我怎么能做到？我已经阅读了 observables 和使用 BehaviorSubject 的内容，但我对 observables 的理解完全不超过我所阅读的内容，我不知道该怎么做。提前感谢任何可以帮助我的人，我将不胜感激。

【问题讨论】：

我不确定我是否完全理解您想要什么。您想从模板的服务访问inmuebles 数组吗？如果这就是您要做的全部，只需将constructor(private hostlistService: HostlistService) 更改为constructor(public hostlistService: HostlistService) 即可实现。如果服务不公开，则无法在模板中访问。

您好@Jacquesジャック 谢谢您的回复。我想要的是能够访问 .html 模板中服务数组的值，执行如下操作：

那么我评论的应该有效。其他人已经用一个例子回答了同样的问题。祝你好运。

我认为如果它有效，问题是它没有向我显示数据，我认为这是因为我尝试在完成填充数组之前显示它们，这就是它没有显示任何东西的原因，但我不知道该怎么做，我把这个条件： 如果它进入条件但数据打印它们是空白的。

【参考方案1】：

将您的服务公开，如constructor(public hostlistService: HostlistService) 然后在模板中您可以执行类似的操作，

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

简而言之，在模板内部使用this.hostlistService.inmuebles 来访问它。

【讨论】：

我认为如果它有效，问题是它没有向我显示数据，我认为这是因为我尝试在完成填充数组之前显示它们，这就是它没有显示任何东西的原因，但我不知道该怎么做，我把这个条件： 如果它进入条件但数据打印它们是空白的。

是的，您的方法是正确的。创建一个标志并在最外层的 div 处执行*ngIf="flag"。现在，当您从 API 完成所有数据获取并创建数组时，只需将标志设为 false。这次视图渲染，它也会显示数据。

但是仍然没有显示数据，点击它后在.ts中放置一个标志，因为它被放置为true，然后在.html中我验证它是否是真实的开始显示数据，但不显示任何内容。什么是朋友？

你能创建一个你想要做什么的堆栈闪电战吗？

【参考方案2】：

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