骚乱 API 与 Angular 2

Question

我试图在这段代码中使用 Riot API 作为冠军

--服务

@Injectable()
export class ChampionService {

private riotUrl = 'https://br1.api.riotgames.com/lol/static-
data/v3/champions?api_key=myApiKey';
constructor(private _http: Http) { }
getChampion(): Observable<Champion[]> {
    return this._http.get(this.riotUrl)
        .map((res:Response) => <Champion[]>[res.json()])
        .do(data => console.log(JSON.stringify(data)));
}}

-- 组件

export class ChampionListComponent{
errorMessage: string;
champions: Champion[];
constructor(private _ChampionService: ChampionService){}
ngOnInit():void{
  this._ChampionService.getChampion()
            .subscribe(champions => this.champions = champions,
                       error => this.errorMessage = <any>error);}

--HTML

<table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor='let champion of champions'>
                    <td>{{champion.id}}</td>
                    <td>{{champion.name}}</td>
                </tr>
            </tbody>
        </table>

在控制台中显示正确..但我的 table

没有任何反应

--- 我的控制台显示这个 Angular is running in the development mode. Call enableProdMode() to enable the production mode. champion-list.service.ts:18 [{"type":"champion","version":"7.8.1","data":{"Jax":{"id":24,"key":"Jax","name":"Jax","title":"o Grão-Mestre das Armas"},"Sona":{"id":37,"key":"Sona","name":"Sona","title":"a Mestra das Cordas"},"Tristana":{"id":18,"key":"Tristana","name":"Tristana","title":"a Artilheira Yordle"},"Varus":{"id":110,"key":"Varus","name":"Varus","title":"a Flecha da Vingança"},"Fiora":{"id":114,"key":"Fiora","name":"Fiora","title":"a Grande Duelista"},"Singed":{"id":27,"key":"Singed","name":"Singed","title":"o Químico Louco"},"TahmKench":{"id":223,"key":"TahmKench","name":"Tahm Kench","title":"o Rei do Rio"},"Leblanc":{"id":7,"key":"Leblanc","name":"LeBlanc","title":"a Farsante"},"Thresh":{"id":412,"key":"Thresh","name":"Thresh","title":"o Guardião das Correntes"},"Karma":{"id":43,"key":"Karma","name":"Karma","title":"a Iluminada"},"Jhin":{"id":202,"key":"Jhin","name":"Jhin","title":"o Virtuoso"},"Rumble":{"id":68,"key":"Rumble","name":"Rumble","title":"a Ameaça Mecânica"},"Udyr":{"id":77,"key":"Udyr","name":"Udyr","title":"o Andarilho Espiritual"},"LeeSin":{"id":64,"key":"LeeSin","name":"Lee Sin","title":"o Monge Cego"},"Yorick":{"id":83,"key":"Yorick","name":"Yorick","title":"Pastor de Almas"},"Kassadin":{"id":38,"key":"Kassadin","name":"Kassadin","title":"o Andarilho do Vazio"},"Sivir":{"id":15,"key":"Sivir","name":"Sivir","title":"a Mestra da Batalha"},"MissFortune":{"id":21,"key":"MissFortune","name":"Miss Fortune","title":"a Caçadora de Recompensas"}...

有人可以帮助我吗？很抱歉 post

Answer 1

即使您在数组中设置响应：

.map((res:Response) => <Champion[]>[res.json()])

这仍然意味着您的数组只包含一个对象，该对象包含对象（您要迭代的对象）。因此，首先让我们删除对数组的赋值，然后进入 JSON 并提取包含所需对象的对象：

.map((res:Response) => res.json().data)

这意味着您最终会得到一个包含您的对象的对象。由于对象不能迭代，我们需要使用管道：

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args?: any[]): any[] {
        // create instance vars to store keys and final output
        let keyArr: any[] = Object.keys(value),
            dataArr = [];

        // loop through the object,
        // pushing values to the return array
        keyArr.forEach((key: any) => {
            dataArr.push(value[key]);
        });

        // return the resulting array
        return dataArr;
    }
}

然后在您的模板中应用该管道：

<tr *ngFor='let champion of champions | keys'>
  <td>{{champion.id}}</td>
  <td>{{champion.name}}</td>
</tr>

这应该可以解决问题！ :)

作为旁注，这意味着您的响应不是 Champion 的数组，因此分配它 <Champion[]> 是不准确的。无论您的界面如何构建，您都需要进行适当的更改。

骚乱 API 与 Angular 2

Riot API With Angular 2

api

typescript

riot

angular

Demo