亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

為什么數組在 Angular 項目中只帶一個對象?

為什么數組在 Angular 項目中只帶一個對象?

當年話下 2023-09-07 16:18:47
我正在使用英雄聯盟 API,更具體地說是他們帶來的冠軍 json。我用 Angular 提供了這項服務: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”只會帶來第一個冠軍(Atrox),而據我所知,它應該帶來所有冠軍(我是 javascript 和 Angular 的新手)。
查看完整描述

1 回答

?
動漫人物

TA貢獻1815條經驗 獲得超10個贊

根據你的例子,我在這里創建了 stackblitz,它使整個arrayChampions迭代對其值進行了迭代。

示例 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]);

? ? });

? }

}


查看完整回答
反對 回復 2023-09-07
  • 1 回答
  • 0 關注
  • 97 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號