时间戳

首页 > 解决方案 > 无法使用 api 的某些部分

html - 无法使用 api 的某些部分

问题描述

嗨，我有一些运行的代码可以从 api 中提取星球大战信息。花了一段时间，但我得到了那个工作，唯一的事情是，一个按钮输出所有信息。我想知道如果可能的话，我如何在 api 上来回跳转以输出不同的东西。

Luke Skywalker 按钮将输出 luke、c-3P0 和 r2-d2 的所有信息。我知道它是因为那是唯一有效的按钮，但我不知道如何实现它。

//html

<button (click)="onClick()">Luke Skywalker</button>
<button type="button">C-3PO</button>
<button type="button">R2-D2</button>


<ion-list>
<ion-item *ngFor="let user of users">
    <h1>Name: {{ user.name }}</h1>
    <h1>Height: {{ user.height }}cm</h1>
    <h1>Mass: {{ user.mass }}kg</h1>
    <h1>Hair Color: {{ user.hair_color }}</h1>
    <h1>Skin Color: {{ user.skin_color }}</h1>
    <h1>Eye Coloe: {{ user.eye_color }}</h1>
    <h1>Birth Year: {{ user.birth_year }}</h1>
</ion-item>
</ion-list>

//点击

  users = [];
  errorFromSubscribe;
  errorFromCatch;
  displayItems;

  constructor(private http: Http) { }

  onClick() {
     this.http.get('https://swapi.co/api/people')
     .subscribe((res: Response) => {
      this.users = res.json().results; 
      console.log(this.users)
      }, error => {
        console.log(error);
        this.errorFromSubscribe = error;
      });
  }

我正在使用的 API：https ://swapi.co/api/people

api中有更多人，但出于问题的目的，我只使用前3个。

所以我真的很想知道如何按下 C-3P0 按钮并仅获取 c-3P0 的信息而不是所有字符信息。

这是带有控制台的输出屏幕：https ://imgur.com/M88Q1MP 。

标签： htmlangularapiionic3ngfor

解决方案

您只需修改您的网络调用以包含您要检索其信息的人员的 ID。

swapi.co/api/people/1/

这将获得 id 为 1 的人的信息。

推荐阅读