为什么数组在 Angular 项目中只带一个对象？

Question

我正在使用英雄联盟 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 的新手）。

Answer 1

根据你的例子，我在这里创建了 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]);

    });

  }

}