각도 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];
}
}