कोणीय 8 एनकोडिंग नहीं

Nov 24 2020

मेरे पास लीग ऑफ लीजेंड्स चैंपियन एपीआई विच रिटर्न है जो मुझे चैंपियंस से मिल रहा है। सेवा।

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

चैंपियंस। सेवा

    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>

नमूना घटक। टीएस:

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