角度數據未在html中呈現

Question

我正在嘗試在stackblitz中實現api調用，並在html頁面中顯示記錄。 由於某種原因，我沒有收到任何錯誤，但屏幕上也沒有呈現任何數據

我不確定是什么問題

這是堆疊閃電戰

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>

服務編號

 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

您沒有subscribe Observable ，因此您永遠不會致電服務。

網址是https://api.coingecko.com/api/v3/coins/ ，因此您不能在服務httpGet使用this.webApplication + url 。

您通過輸入網址來從此json格式化程序中冷檢查json數據

請參考以下更改：

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沒有地址，圖像是您需要更改的數組）

<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>

更新：

在list-wrapper.Cpmponent.ts中， this.bitcoins$ = this.listWrapperService.getBitCoins()可以自動執行訂閱，因此主要問題在於網址不正確。