时间戳

首页 > 解决方案 > “承诺”类型上不存在属性“订阅”>' 角度服务调用

angular - “承诺”类型上不存在属性“订阅”>' 角度服务调用

问题描述

尝试在组件的初始化时在 Angular 中进行服务调用，我从中获取数据的服务器需要一些时间来响应，因此我试图使用承诺将返回的数据分配给组件中的 this.stats

尝试编写函数时，我得到->我的“订阅”（在我的组件中）的“Promise<Observable>”类型上不存在属性“订阅”我尝试了几种方式重写该函数，我无法改变错误，我可能只是从根本上做错了，但在这里找不到任何与我的确切情况相匹配的东西，所以我想我会寻求任何可能的解释......也许有些类型转换我需要改变吗？

零件

export class StatsComponent implements OnInit {
  @Input() stats: any
  @Output() onUpdateStats: EventEmitter<Object> = new EventEmitter()

  constructor(private specsService: SpecsService) { }

  async ngOnInit(): Promise<void> {
    await this.specsService.getStats().subscribe((response) => {this.stats=response});
  }

  updateStats(){
    console.log(this.stats)
    this.onUpdateStats.emit()
    
  }

}

服务.ts

 async getStats():Promise<Observable<Object>>{
    return await this.http.get(`http://localhost:8888/fetchStats`)
   
  }

标签： angularasync-awaitsubscribe

解决方案

你不应该把 promise 和 observables 混在一起。Angular 自带的 RxJs 使用了 Observable 设计模式，你绝对应该坚持使用它并避免使用 async/await。

服务 ：

getStats():Observable<Object>{
   return this.http.get(`http://localhost:8888/fetchStats`)
}

零件 ：

export class StatsComponent {
  @Output() onUpdateStats: EventEmitter<Object> = new EventEmitter();
  stats: Observable<Object>;

  constructor(private specsService: SpecsService) {
      this.stats = this.specsService.getStats();
  }

  updateStats(){
    console.log(this.stats)
    this.onUpdateStats.emit()
  }

}

推荐阅读