时间戳

首页 > 解决方案 > 角度数据未在 html 中呈现

angular - 角度数据未在 html 中呈现

问题描述

我正在尝试在 stackblitz 中实现 api 调用并在 html 页面中显示记录。出于某种原因，我没有收到任何错误，但屏幕上也没有呈现任何数据

我不确定问题是什么

这是堆栈闪电战

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

app.component.html

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

ListWrapper 组件

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/');
      }
    }

标签： angular

解决方案

你没有subscribe你的Observable，所以你从不打电话给你的服务。

而且网址是https://api.coingecko.com/api/v3/coins/，所以你不能this.webApplication + url在你的服务中使用httpGet。

您通过输入 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()可以自动进行订阅，所以主要问题在于url不正确。

推荐阅读