如何从基于密钥的Angular API中获取数据

Question

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

@Injectable({
  providedIn: "root"
})
export class BillboardService {
  constructor(private http: HttpClient) {}

  songListing() {
    return this.http.get("https://genius.p.rapidapi.com/songs/442856");
  }
}


//this is the key for the Above URL
req.headers({
  "x-rapidapi-host": "genius.p.rapidapi.com",
  "x-rapidapi-key": "3303d9db4emsh110b2cbf210fcf8p1f81d0jsn5cb37c0ff44d"
});

<div *ngFor="let item of songs">
{{item.annotation_count}}
</div>

上面是我的广告牌服务的代码，但是来自Rapid API门户，它基于“密钥”，因此我如何使用该密钥在模板中获取数据。

Answer 1

您可以使用keyvalue管道迭代对象：

<div *ngFor="let item of songs | keyvalue">
    {{item.key}}
    {{item.value}}
</div>