Angular 8 ngFor not binding

I have the League of Legends Champion API witch returns what I'm getting from the 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>


The fact is that nothing appears in the HTML. I don't know really well which is the problem.

Continue reading...