Question

我试图在此代码中使用Riot API for Champions

- 服务

@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>

在控制台中显示正确..但我的表没有任何问题

---我的控制台显示这个 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"}...

有人可以帮帮我吗？对不起，长篇文章

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[]>是不准确的。无论您的界面是否已构建，您都需要进行适当的更改。

Angular 2的Riot API

1 个答案:

Demo