角度数据未在html中呈现

Question

I am trying to implement an api call in stackblitz and display the records in the html page. For some reason I am getting no errors but neither is any data getting rendered on the screen

I am not sure what the problem is

Here is the stackblitz

https://stackblitz.com/edit/angular-cjqmyg?file=src/app/app.component.html

app.component.html

<app-list-wrapper></app-list-wrapper>

ListWrapperComponent

import {ListWrapperService} from '../service/list-wrapper.service';

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable, of, EMPTY } from 'rxjs';
import { catchError } from 'rxjs/operators';



@Component({
  selector: 'app-list-wrapper',
  templateUrl: './list-wrapper.component.html',
  styleUrls: ['./list-wrapper.component.css']
})
export class ListWrapperComponent implements OnInit {
bitcoins$: Observable<IListWrapper[]>;
  errorMessage: any;
  constructor(private listWrapperService : ListWrapperService) { }

  ngOnInit() {
     this.bitcoins$ = this.listWrapperService.getBitCoins()
          .pipe(
              catchError(err => {
                 this.errorMessage = err;
                 return EMPTY;
              })
          )
  }

}

html

<div class="container">
    <div *ngIf="bitcoins$ | async as bitcoins">
    <table class="table table-striped">
      <thead>
          <tr>
            <th>symbol</th>
            <th>name</th>
            <th>Contact Title</th>
            <th>block_time_in_minutes</th>
            <th>image</th>
          </tr>
      </thead>
      <tbody>
        <tr *ngFor="let bitcoin of bitcoins">
          <td>{{ bitcoin.symbol }}</td>
          <td>{{ bitcoin.name }}</td>
          <td>{{ bitcoin.block_time_in_minutes }}</td>
          <td>{{ bitcoin.address }}</td>
          <td>{{ bitcoin.image }}</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>

Service code

 import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { SmartTrCommonService } from '../shared/smarttr.common.service';

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

      constructor(private smartTrCommonService:  SmartTrCommonService) { }

      getBitCoins() : Observable<IListWrapper[]>{
        return this.smartTrCommonService.httpGet('/api.coingecko.com/api/v3/coins/');
      }
    }

Answer 1

You does not subscribe your Observable ，so you never call your service.

And the url is https://api.coingecko.com/api/v3/coins/ ,so you could not use this.webApplication + url in your service httpGet .

You cold check the json data from this json formatter by inputing the url

Refer to below changes:

1.SmartTrCommonService.ts

 httpGetTest(url: string): Observable<any> {
    return this.httpClient.get('https:' + '//' + url)
        .pipe(map((response: Response) => {
            return response;
        }), catchError(error => {
            this.onError(error);
            return Promise.reject(error);
        }));
}

2.ListWrapperService.ts

getBitCoins() : Observable<IListWrapper[]>{
    return this.smartTrCommonService.httpGetTest('/api.coingecko.com/api/v3/coins/');
}

3.list-wrapper.Component.ts

export class ListWrapperComponent implements OnInit {

  bitcoins:IListWrapper[];

  errorMessage: any;
  constructor(private listWrapperService : ListWrapperService) { }

  ngOnInit() {
    this.listWrapperService.getBitCoins()
        .subscribe(bitcoins => this.bitcoins = bitcoins,error => this.errorMessage = error)
  }

}

4.list-wrapper.Component.html(json has no address and image is an array which you need to change)

<div class="container">
<div *ngIf="bitcoins">
  <table class="table table-striped">
    <thead>
        <tr>
          <th>symbol</th>
          <th>name</th>
          <th>Contact Title</th>
          <th>block_time_in_minutes</th>
          <th>image</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let bitcoin of bitcoins">
        <td>{{ bitcoin.symbol }}</td>
        <td>{{ bitcoin.name }}</td>            
        <td>{{ bitcoin.address }}</td>
        <td>{{ bitcoin.block_time_in_minutes }}</td>
        <td>{{ bitcoin.image }}</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Update:

In list-wrapper.Cpmponent.ts, this.bitcoins$ = this.listWrapperService.getBitCoins() could do the subscribtion automatically, so the main problem lies in that the url is not correct.