尽管调用了 Http 服务 [重复]，但数据未显示在 UI 上答案

【问题标题】：Data not shown on UI despite Http Service getting Called [duplicate]尽管调用了 Http 服务 [重复]，但数据未显示在 UI 上
【发布时间】：2019-08-01 07:59:40
【问题描述】：

由于 RXjs 版本 6 中的升级而导致呼叫不起作用，该版本已包含在 Angular 版本 8 中。有关完整的源代码，请参见：- https://github.com/ankit01122/CRUDApp

import { Component } from '@angular/core';
import {ServicexampleService} from './servicexample.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'CRUDApp';
  heroes: object;

  constructor(private serviceExample: ServicexampleService) {
    this.heroes = serviceExample.returnABC();
  }
  getHeroes(): void {
    this.heroes = this.serviceExample.returnABC();
  }
}

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServicexampleService {
  private httpClient: HttpClient;
  private abc: Observable<object>;

  constructor( httpClient: HttpClient ) {
    this.abc =  httpClient.get('https://jsonplaceholder.typicode.com/todos/1');
      }

 public returnABC = (): Observable<object> => this.abc;
}

服务应该被执行并获取http://localhost:4200/上的数据

【问题讨论】：

什么不起作用？你遇到了什么错误？
你需要 .subscribe() 到你的 observable
@xdecdec :- 屏幕上不显示任何数据。我们无法在此处发布图像，否则会显示给您。
imgur.com/mUSzdoH
将此任务签署为已解决。 {英雄 | json} 解决了这个任务。

标签： angular typescript

【解决方案1】：

您必须订阅您的 observable，否则它将无法工作。

this.serviceExample.returnABC().subscribe(
    data => {
        this.heroes = data;
    }
)
;

【讨论】：

最好在模板中使用异步管道。
如github.com/ankit01122/CRUDApp/blob/master/src/app/… 所示所做的更改服务也被调用，但数据未填充。
您仍在将 this.heroes 分配给可观察对象。您不需要这样做，因为您现在订阅了结果并将返回的数据分配给 this.heroes。
还是一样的结果...更新文件请看github.com/ankit01122/CRUDApp/blob/master/src/app/…
你是否在调用 getHeroes() 之后，因为你可能覆盖了 heros 变量？此外，我将从构造函数中删除您的服务调用并将其放入 ngOnInit。这是 Angular 文档中建议的做法。

【解决方案2】：

Observables 是惰性的，除非您要求它们执行，否则它们不会执行。你可以通过两种方式做到这一点。一种是订阅 Sam 的回复。

或使用async 管道为您完成这项工作。异步管道将自动取消订阅，而当您订阅时，您应该自己处理取消订阅部分。 http://reactivex.io/rxjs/manual/overview.html#observable

【讨论】：

【解决方案3】：

最好不要在构造函数中调用http。

相反，更好的做法是在构造函数中注入 http，然后在方法中发出请求。每个 httpClient 调用都会返回一个 Observable，因此为了检索响应，您必须订阅它。

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServicexampleService {

  constructor(private httpClient: HttpClient ) {

   }

 public returnABC(): Observable<any> {
     return this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1);
 }
}



import { Component } from '@angular/core';
import {ServicexampleService} from './servicexample.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'CRUDApp';
  heroes: object;

  constructor(private serviceExample: ServicexampleService) {

  }

  ngOnInit() {
      // in case you want to get heroes on init
      this.getHeroes()
  }
  getHeroes(): void {
    this.serviceExample.returnABC().subscribe(response => {
            this.heroes = response;
        });
  }
}

【讨论】：