时间戳

首页 > 解决方案 > 如何从 ngOnInit Angular 中的服务获取数据

angular - 如何从 ngOnInit Angular 中的服务获取数据

问题描述

我在尝试从 http 服务获取 ngOnInit 中的数据时遇到问题。当组件被触发时，我需要在 var 中设置我的数据，这样我就可以在其他函数中使用它。

我通过执行异步 ngOnInit 并接收来自 Promise 函数的响应来实现这一点，但我认为这不是一个好习惯吗？我该如何改进它？

这是我的代码：

组件.TS



     async ngOnInit() {
        this.username = localStorage.getItem('username');
        this.segment.value = 'FUNCIONAL';
        this.categoria = this.segment.value;
        this.listadoClases = await this.claseServicio.obtenerListadoClases(this.categoria); // **Need to set this variable at onInit**

服务.TS


    getClases(actividad) {
        return this.http.get(`https://anders-test.herokuapp.com/clases/obtenerPorCategoria/${actividad}`);
      }


      obtenerListadoClases(categoria) {
        return new Promise(resolve => {
          this.getClases(categoria).subscribe(data => {
            if (data) {
              resolve(data)
            }
          })
        })
      }

我这样做是因为我试图学习/理解异步/等待。我想稍微升级一下我的代码..但是在阅读了很多之后我没有得到这个想法..

提前谢谢各位！

标签： angularionic-frameworkserviceasync-await

解决方案

Nyco，你到底为什么要把事情搞得这么复杂？

服务

  getClases(actividad) {
        return this.http.get(`https://anders-test.herokuapp.com/clases/obtenerPorCategoria/${actividad}`);
      }

组件

//inject the service in constructor
constructor(private service:Service){}

ngOnInit() {
    this.username = localStorage.getItem('username');
    this.segment.value = 'FUNCIONAL';
    this.categoria = this.segment.value;
    this.service.getClases(this.categoria).subscribe(res=>{
        this.categorias=res
    })
}

除了某些特殊功能外，您应该避免订阅服务。认为 Angular 是对 Observables 的改造。如果您需要在 Promise 中转换 Observable，这应该是一个很好的理由

推荐阅读