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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

為什么數(shù)組在 Angular 項(xiàng)目中只帶一個(gè)對(duì)象?

為什么數(shù)組在 Angular 項(xiàng)目中只帶一個(gè)對(duì)象?

當(dāng)年話下 2023-09-07 16:18:47
我正在使用英雄聯(lián)盟 API,更具體地說是他們帶來的冠軍 json。我用 Angular 提供了這項(xiàng)服務(wù):import { Injectable } from '@angular/core';import { HttpClient, HttpHeaders} from '@angular/common/http';const httpOptions = {  headers: new HttpHeaders({'Content-Type': 'application/json'})}@Injectable({  providedIn: 'root'})export class ChampionsService {  constructor(private http: HttpClient) { }  getChampions(){    return this.http.get('http://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json');  }}這是我的 .ts 文件:import { Component, OnInit } from '@angular/core';import {ChampionsService } from '../../services/champions.service';@Component({  selector: 'app-champions',  templateUrl: './champions.component.html',  styleUrls: ['./champions.component.css']})export class ChampionsComponent implements OnInit {  public champions;  public arrayChampions;      constructor(private championsService:ChampionsService) { }  ngOnInit(): void {    this.getAllChampions();  }  getAllChampions(){    this.championsService.getChampions().subscribe(      data => { this.champions = data,         this.arrayChampions = Object.entries(this.champions.data).map(([k,v]) => ({ [k]:v })),        this.ArrayIterator();       },      err => {console.error(err)},      () => console.log("Champions cargados")    );  }  ArrayIterator() {    let IteratableArray = Array();    for (let item of Object.keys(this.arrayChampions[0])) {      var eventItem = Object.values(this.arrayChampions[0]);      IteratableArray.push(eventItem);    }    this.arrayChampions = IteratableArray[0];  }}正如你所看到的,var“arrayChampions”只會(huì)帶來第一個(gè)冠軍(Atrox),而據(jù)我所知,它應(yīng)該帶來所有冠軍(我是 javascript 和 Angular 的新手)。
查看完整描述

1 回答

?
動(dòng)漫人物

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超10個(gè)贊

根據(jù)你的例子,我在這里創(chuàng)建了 stackblitz,它使整個(gè)arrayChampions迭代對(duì)其值進(jìn)行了迭代。

示例 HTML:

<hello name="{{ name }}"></hello>

<!-- {{this.products |json}} -->

<ul>

? ? <li *ngFor="let champ of products | keyvalue">

? ? ? ? <label style="font-size: 20px;font-weight: bold;color: red;">

? ? ? {{champ.key}}

? ? </label>

? ? ? ? <ul *ngFor="let item of champ.value | keyvalue">

? ? ? ? ? ? <li>

? ? ? ? ? ? ? ? {{item.key}} : {{item.value}}

? ? ? ? ? ? ? ? <ul *ngFor="let sub of item.value | keyvalue">

? ? ? ? ? ? ? ? ? ? <li>

? ? ? ? ? ? ? ? ? ? ? ? {{sub.key}} : {{sub.value}}

? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? </li>

? ? ? ? </ul>

? ? </li>

</ul>

示例組件.ts:


import { Component } from "@angular/core";

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

import { map, catchError, tap } from "rxjs/operators";


@Component({

? selector: "my-app",

? templateUrl: "./app.component.html",

? styleUrls: ["./app.component.css"]

})

export class AppComponent {

? apiURL: string =

? ? "https://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json";

? name = "Angular";

? products = [];


? constructor(private httpClient: HttpClient) {}


? ngOnInit() {

? ? this.getChamp();

? }


? getChamp() {

? ? this.httpClient.get(this.apiURL).subscribe((data: any) => {

? ? ? this.products = data.data;

? ? ? Object.keys(data.data).map((key: any, obj: any) => obj[key]);

? ? });

? }

}


查看完整回答
反對(duì) 回復(fù) 2023-09-07
  • 1 回答
  • 0 關(guān)注
  • 104 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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