第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何從組件角度獲取數(shù)據(jù)并將其打印到html中?

如何從組件角度獲取數(shù)據(jù)并將其打印到html中?

翻翻過去那場雪 2022-08-18 10:10:58
如何從組件角度獲取數(shù)據(jù)并將其打印到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;  }}
查看完整描述

3 回答

?
炎炎設(shè)計

TA貢獻1808條經(jīng)驗 獲得超4個贊

根據(jù)您正在調(diào)用的 API


將您的 ts 更新為


getTasksFromService() {

    let observable = this._httpService.getPokemon();

    observable.subscribe((data) => {

      this.tasks = data;

    });

  }

在你的網(wǎng)頁中


<div>

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

</div>

您應(yīng)該看到輸出bulbasaur


當(dāng)你有口袋妖怪列表時,你需要,但你發(fā)布的API(https://pokeapi.co/api/v2/pokemon/1/)包含上述代碼工作的單個口袋妖怪fow的詳細信息。*ngFor


查看完整回答
反對 回復(fù) 2022-08-18
?
眼眸繁星

TA貢獻1873條經(jīng)驗 獲得超9個贊

修改你的 getTasksFromService as


 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>

我希望這個解決方案適用于您的問題。


查看完整回答
反對 回復(fù) 2022-08-18
?
千萬里不及你

TA貢獻1784條經(jīng)驗 獲得超9個贊

請參閱更新的更改:


componen.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: 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);

    });

  }

}

服務(wù):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只返回一個信息,因此您不需要inhtml頁面。*ngFor


網(wǎng)頁 :


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

我希望這對你有用。


注意:我還提到了根據(jù)編碼標準進行的變化。


查看完整回答
反對 回復(fù) 2022-08-18
  • 3 回答
  • 0 關(guān)注
  • 81 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號