角为2的防暴API

Question

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

-服务

@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[]>是不准确的。不管您的界面是如何构建的，您都需要进行适当的更改。

演示