Angular 如何将外部api值绑定到角度接口并在组件（html）中显示它？

我一直在寻找，但没有确定的答案。所以我就这样试试。它实际上非常简单，但我只是不知道如何实现它（angular是新手，但知道基本知识）

我想要一个显示资产当前价格的组件。我有一个返回JSON的api调用。 Api调用： 返回：

但事情是这样的。如何将此数据绑定到angular中的接口？我只需要在组件中显示usd价格值，但需要先将其绑定到一个类，以便在html组件中使用它

类需要具有哪些值？这不起作用：

也许有人知道一个很好的api教程，说明如何做到这一点？到目前为止我还没有找到。此外，我发现的那些在响应中定义了明确的属性，如：{ “名称”：比特币 “美元”：10279.66 }

---

简而言之：从该API获取数据（只是价格）。并在模板（angular component.html）中使用它

从API读取数据，您需要创建一个角度组件

注意：Http GET return OVERVABLE我们订阅了读取的数据，我们必须取消订阅OVERVABLE以防止内存泄漏，我使用运算符取消订阅有几种方法

服务.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface IcoindDetail {
 bitcoin?: { usd: number },
 ethereum?: { usd: number }
}

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

// inject httpClient to read restful methods
constructor(private http: HttpClient) {} 

// create a method that read API URL using GET method
getData() {
  const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd';

  // return API response
  return this.http.get<IcoindDetail>(url)
 }
}

data: IcoindDetail;

// inject service to read methods
constructor(private service: MyService) {}

ngOnInit() {
  // read response from API and store in data variable
  this.service.getData()
    .pipe(take(1)) // notice take(1) to unsubscribe observable  
    .subscribe((res) => this.data = res)
}

template.html

<div *ngIf="data"> {{ data.bitcoin.usd }} </div>

{{data.bitcoin.usd}

---

工作

要从API读取数据，需要创建一个角度

注意：Http GET return OVERVABLE我们订阅了读取的数据，我们必须取消订阅OVERVABLE以防止内存泄漏，我使用运算符取消订阅有几种方法

服务.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface IcoindDetail {
 bitcoin?: { usd: number },
 ethereum?: { usd: number }
}

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

// inject httpClient to read restful methods
constructor(private http: HttpClient) {} 

// create a method that read API URL using GET method
getData() {
  const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd';

  // return API response
  return this.http.get<IcoindDetail>(url)
 }
}

data: IcoindDetail;

// inject service to read methods
constructor(private service: MyService) {}

ngOnInit() {
  // read response from API and store in data variable
  this.service.getData()
    .pipe(take(1)) // notice take(1) to unsubscribe observable  
    .subscribe((res) => this.data = res)
}

template.html

<div *ngIf="data"> {{ data.bitcoin.usd }} </div>

{{data.bitcoin.usd}

---

工作

您可以简单地使用

服务

获得

API

响应，然后将您的服务注入到您想要的任何组件中（依赖项注入）。使用服务返回值设置组件的局部变量

因此，请尝试以下方法：

app.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface IcoindDetail {
 bitcoin?: { usd: number },
 ethereum?: { usd: number }
}

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

// inject httpClient to read restful methods
constructor(private http: HttpClient) {} 

// create a method that read API URL using GET method
getData() {
  const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd';

  // return API response
  return this.http.get<IcoindDetail>(url)
 }
}

data: IcoindDetail;

// inject service to read methods
constructor(private service: MyService) {}

ngOnInit() {
  // read response from API and store in data variable
  this.service.getData()
    .pipe(take(1)) // notice take(1) to unsubscribe observable  
    .subscribe((res) => this.data = res)
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
@注射的({
providedIn:'根'
})
出口级服务{
常量apiUrl=”https://api.coingecko.com/api/v3/simple/price? 
ids=比特币和vs_货币=美元”
构造函数（私有http:HttpClient）{}
GetApiResponse（）：可观察（）{
返回this.http.get（this.apirl）；
}
}

应用程序组件.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface IcoindDetail {
 bitcoin?: { usd: number },
 ethereum?: { usd: number }
}

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

// inject httpClient to read restful methods
constructor(private http: HttpClient) {} 

// create a method that read API URL using GET method
getData() {
  const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd';

  // return API response
  return this.http.get<IcoindDetail>(url)
 }
}

data: IcoindDetail;

// inject service to read methods
constructor(private service: MyService) {}

ngOnInit() {
  // read response from API and store in data variable
  this.service.getData()
    .pipe(take(1)) // notice take(1) to unsubscribe observable  
    .subscribe((res) => this.data = res)
}

从'@angular/core'导入{Component，OnInit}；
从“/app.srvice”导入{ApiService}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
公共对象：any={}；
构造函数（私有apiService:apiService）{}
恩戈尼尼特（）{
this.apiService.getApiResponse（）.pipe（take（1））.subscribe(
res=>{
this.obj=res；
}
);
}
}

app.component.html

<div *ngIf="data"> {{ data.bitcoin.usd }} </div>

{{obj.bitcoin.usd}

您只需使用

服务

获得

API

响应，然后将您的服务注入到您想要的任何组件中（依赖项注入）。使用服务返回值设置组件的局部变量

因此，请尝试以下方法：

app.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface IcoindDetail {
 bitcoin?: { usd: number },
 ethereum?: { usd: number }
}

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

// inject httpClient to read restful methods
constructor(private http: HttpClient) {} 

// create a method that read API URL using GET method
getData() {
  const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd';

  // return API response
  return this.http.get<IcoindDetail>(url)
 }
}

data: IcoindDetail;

// inject service to read methods
constructor(private service: MyService) {}

ngOnInit() {
  // read response from API and store in data variable
  this.service.getData()
    .pipe(take(1)) // notice take(1) to unsubscribe observable  
    .subscribe((res) => this.data = res)
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
@注射的({
providedIn:'根'
})
出口级服务{
常量apiUrl=”https://api.coingecko.com/api/v3/simple/price? 
ids=比特币和vs_货币=美元”
构造函数（私有http:HttpClient）{}
GetApiResponse（）：可观察（）{
返回this.http.get（this.apirl）；
}
}

应用程序组件.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface IcoindDetail {
 bitcoin?: { usd: number },
 ethereum?: { usd: number }
}

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

// inject httpClient to read restful methods
constructor(private http: HttpClient) {} 

// create a method that read API URL using GET method
getData() {
  const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd';

  // return API response
  return this.http.get<IcoindDetail>(url)
 }
}

data: IcoindDetail;

// inject service to read methods
constructor(private service: MyService) {}

ngOnInit() {
  // read response from API and store in data variable
  this.service.getData()
    .pipe(take(1)) // notice take(1) to unsubscribe observable  
    .subscribe((res) => this.data = res)
}

从'@angular/core'导入{Component，OnInit}；
从“/app.srvice”导入{ApiService}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
公共对象：any={}；
构造函数（私有apiService:apiService）{}
恩戈尼尼特（）{
this.apiService.getApiResponse（）.pipe（take（1））.subscribe(
res=>{
this.obj=res；
}
);
}
}

app.component.html

<div *ngIf="data"> {{ data.bitcoin.usd }} </div>

{{obj.bitcoin.usd}

从API中获取数据并在模板中显示，您到底想实现什么？是的，正是这样，我想从该API中获取数据（以美元为单位的价格）并在模板中显示数据（角度分量）。让我添加一个解决方案，请稍候。太棒了，谢谢！你到底想从API获取数据并在模板中显示什么？是的，正是这样，我想从API获取数据（美元价格）并在模板中显示（角度组件）。让我添加一个解决方案，等等。太棒了，谢谢！太棒了，这真管用！有没有一种方法可以让我拥有一个类，并将其用于所有类型的响应，而不仅仅是比特币、美元。还有以太坊、usd等？是的，你可以在服务中添加更多的方法，这些方法有不同的用途。啊，好的，但是对于IcoinDetail接口，我需要创建像IcoinDetail2{以太坊：{usd:number}这样的新方法？或者有没有更简单的方法。不需要，你可以通过使用问号添加相同的ICOIndeals和可选值。我已经更新了我的答案签出界面，现在它包含了可选值和可选值。太棒了，这很管用！有没有一种方法可以让我拥有一个类，并将其用于所有类型的响应，而不仅仅是比特币、美元。还有以太坊、usd等？是的，你可以在服务中添加更多的方法，这些方法有不同的用途。啊，好的，但是对于IcoinDetail接口，我需要创建像IcoinDetail2{以太坊：{usd:number}这样的新方法？还是在那里