时间戳

首页 > 解决方案 > 如何通过单击按钮显示从 api 获得的数据？

javascript - 如何通过单击按钮显示从 api 获得的数据？

问题描述

我已经设法从 API 获取数据并在页面加载时将其显示在屏幕上，但我不知道如何通过单击按钮来显示它。我该怎么做呢？

这是我的 component.ts 文件

import { Component  } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { map, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'NewProjectAdnan';
  
  private apiUrl = 'https://api.coindesk.com/v1/bpi/currentprice.json';
  bitcoinData: any = {};

  constructor (private http: HttpClient) {
    console.log('hello fellow user!')
    //this.getData();
    //dthis.getContacts();
}

getData(){

  var myHttpObservable = this.http.get( this.apiUrl );

 return myHttpObservable.pipe(
    map((bitcoinData) => {
                return bitcoinData;
              }))
    }

    
    getContacts(){
      this.getData().subscribe(bitcoinData => {
        console.log(bitcoinData);
        this.bitcoinData=bitcoinData
      })
    }
  }

这是我的 HTML 文件

<body>
  <button >get bitcoin price</button>
  <div id="myDiv"> The bitcoin rate for the date {{ bitcoinData.time.updated }} is {{ bitcoinData.bpi.USD.rate }} 
    {{ bitcoinData.bpi.USD.code }}. </div>
</body>

我在角度 8。

标签： javascriptangularbutton

解决方案

将点击事件添加到您的按钮以调用您的 getData() 函数

<body>
  <button (click)="getData()">get bitcoin price</button>
  <div id="myDiv"> The bitcoin rate for the date {{ bitcoinData.time.updated }} is {{ bitcoinData.bpi.USD.rate }} 
    {{ bitcoinData.bpi.USD.code }}. </div>
</body>

推荐阅读