각도 8ng 입찰하지 않는 경우

Nov 24 2020

League of Legends Champion API 마녀가 champions.service에서 얻은 것을 반환합니다.

.ts 업데이트

    
    @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];
  }
    
    
    }

champions.service

    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');
    }

HTML :

    <div *ngFor="let arrayChampion of arrayChampions>
        <a class="text-decoration-none">{{arrayChampion.id}}</a>
    </div>

사실은 HTML에 아무것도 나타나지 않는다는 것입니다. 나는 무엇이 문제인지 잘 모르겠습니다.

답변

1 SelakaNanayakkara Nov 24 2020 at 13:57

배열의 첫 번째 요소는 object템플릿에서 똑바로 반복 할 수 없기 때문에 이후입니다. 따라서 템플릿을 반복 할 수 있도록 적절히 변환해야합니다. 이를 위해 다음을 진행할 수 있습니다.

여기에서 작업하는 stackblitz 예제를 여기에 첨부합니다.

샘플 HTML :

<div *ngFor="let arrayChampion of arrayChampions>
    <a class="text-decoration-none">{{arrayChampion.id}}</a>
</div>

component.ts 샘플 :

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular 4";
  arrayChampions: any;
  data = [
    {
      Aatrox: {
        id: "Aatrox",
        key: "266"
      },
      Ahri: {
        id: "Ahri",
        key: "103"
      },
      Akali: {
        id: "Akali",
        key: "84"
      }
    }
  ];

  constructor() {}
  ngOnInit() {
    this.ArrayIterator();
  }

  ArrayIterator() {
    let IteratableArray = Array();
    for (let item of Object.keys(this.data[0])) {
      var eventItem = Object.values(this.data[0]);
      IteratableArray.push(eventItem);
    }
    this.arrayChampions = IteratableArray[0];
  }
}