如何从组件 angular 获取数据并将其打印到 html 中？

Question

如何从组件 angular 获取数据并将其打印到 html 中？ 我正在尝试从我的组件中获取我的 html 中的口袋妖怪名称

这是我的 app.components.ts：

import { Component, OnInit } from "@angular/core";
import { HttpService } from "./http.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "pokemon";
  tasks = [];
  task = "";
  constructor(private _httpService: HttpService) {}

  ngOnInit() {
    this.getTasksFromService();
  }

  getTasksFromService() {
    let observable = this._httpService.getPokemon();
    observable.subscribe((data) => {
      this.tasks = data["data"];
      console.log(data);
      return data;
    });
  }
}

这是我的 HTML：

<div *ngFor="let task of tasks; let idx = index">
  <p>{{task.name}}</p>
</div>


<router-outlet></router-outlet>

这是我的 http.service.ts：

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

@Injectable({
  providedIn: "root",
})
export class HttpService {
  constructor(private _http: HttpClient) {
    this.getPokemon();
  }

  getPokemon() {
    let pokemon = this._http.get("https://pokeapi.co/api/v2/pokemon/1/");
    return pokemon;
  }
}

谢谢！

Answer 1

根据您正在调用的 API

将您的 ts 更新为

getTasksFromService() {
    let observable = this._httpService.getPokemon();
    observable.subscribe((data) => {
      this.tasks = data;
    });
  }

在你的 html

<div>
  <p>{{task.name}}</p>
</div>

您应该将bulbasaur视为output

当您有口袋妖怪列表时，您需要*ngFor ，但您发布的 API（ https://pokeapi.co/api/v2/pokemon/1/ ）包含上述代码有效的单个口袋妖怪流的详细信息。

Answer 2

请查看更新的更改：

成分：

import { Component, OnInit } from "@angular/core";
import { HttpService } from "./http.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "pokemon";
  tasks: any; // Make this as type of any
  task = "";
  constructor(private _httpService: HttpService) {}

  ngOnInit() {
    this.getTasksFromService();
  }

  getTasksFromService() {
    this._httpService.getPokemon.subscribe(data => { // You can directly subscribe to this service, instead of creating an object and then subscribing to it.
      this.tasks = data;
      console.log(data);
    });
  }
}

服务.ts：

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

@Injectable({
  providedIn: "root",
})
export class HttpService {
  constructor(private _http: HttpClient) { }

  getPokemon() {
    return this._http.get("https://pokeapi.co/api/v2/pokemon/1/"); // You can directly return the observable.
  }
}

由于 API 只返回一个信息，因此您不需要*ngFor inhtml 页面。

html：

<p>{{task.name}}</p>

我希望这对你有用。

注意：我还提到了根据编码标准进行的更改。

Answer 3

将您的 getTasksFromService 修改为

 getTasksFromService() {
    let observable = this._httpService.getPokemon();
    observable.subscribe((data) => {
      this.tasks = data["abilities"]; //because response data consist of array of ability in 'abilities'
      console.log(data);
      return data;
    });
  }

和你的 html 作为

<div *ngFor="let task of tasks; let idx = index">
  <p>{{task.ability.name}}</p> 
</div>


<router-outlet></router-outlet>

我希望这个解决方案可以解决您的问题。