Question

我想循环一个名为data的数组，在另一个充满'champions'的数组中，这是什么语法？我可以愉快地循环我的IChampion中的所有冠军，但我似乎无法循环IChampionData []

IChampion.ts

import { IChampionData } from "./champion-data";

export interface IChampion {
   type: string;
   format: string;
   version: string;
   data: IChampionData[];
}

HTML

<div class='table-responsive'>
<table class='table table-striped'>
    <thead>
        <tr>
            <th>Champion Name</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let champion of champion">
            <td>{{champion1.name}}</td>
        </tr>
    </tbody>
</table>

数据是我想要循环的，我在IChampionData中有一个名为name的变量，我不知道如何获取变量。

这是JSON的一个例子

  "data": {
        "Aatrox": {
            "version": "6.24.1",
            "id": "Aatrox",
            "key": "266",
            "name": "Aatrox",
            "title": "the Darkin Blade",
            "blurb": "Aatrox is a legendary warrior, one of only five that remain of an ancient race known as the Darkin. He wields his massive blade with grace and poise, slicing through legions in a style that is hypnotic to behold. With each foe felled, Aatrox's ...",
            "info": {
                "attack": 8,
                "defense": 4,
                "magic": 3,
                "difficulty": 4
            },
            "image": {
                "full": "Aatrox.png",
                "sprite": "champion0.png",
                "group": "champion",
                "x": 0,
                "y": 0,
                "w": 48,
                "h": 48
            },
            "tags": [
                "Fighter",
                "Tank"
            ],
            "partype": "BloodWell",
            "stats": {
                "hp": 537.8,
                "hpperlevel": 85.0,
                "mp": 105.6,
                "mpperlevel": 45.0,
                "movespeed": 345.0,
                "armor": 24.384,
                "armorperlevel": 3.8,
                "spellblock": 32.1,
                "spellblockperlevel": 1.25,
                "attackrange": 150.0,
                "hpregen": 6.59,
                "hpregenperlevel": 0.5,
                "mpregen": 0.0,
                "mpregenperlevel": 0.0,
                "crit": 0.0,
                "critperlevel": 0.0,
                "attackdamage": 60.376,
                "attackdamageperlevel": 3.2,
                "attackspeedoffset": -0.04,
                "attackspeedperlevel": 3.0
            }
        }

这是我对模特的尝试

import { IChampionStats } from './champion-stats';
import { IChampionImage } from './champion-image';
import { IChampionInfo } from './champion-info';

export interface IChampionData {
   version: string;
   id: string;
   key: string;
   name: string;
   title: string;
   blurb: string;
   info: IChampionInfo[];
   image: IChampionImage[];
   tags: string[];
   partype: string;
   stats: IChampionStats[];
 }

Answer 1

现在实际上知道你的代码是什么样的......它实际上是一个包含一个你正在接收的对象的数组，并且对象中有对象。

[{
 "version": "6.24.1",
 "data": {
   "Aatrox": {
     "version": "6.24.1",
     "id": "Aatrox",
     "key": "266",
     "name": "Aatrox",
     "info": {
       "attack": 8,
        ...
     }
     ...
   },
   ...
}]

所以你要做的是，循环对象，不能用*ngFor循环。所以首先你的接口有问题。您在大多数地方标记了数组，其中数据实际上是对象。所以你的界面应该是这样的：

export interface IChampion {
   type: string;
   format: string;
   version: string;
   data: IChampionData; // this is an object!
}

export interface IChampionData {
   version: string;
   id: string;
   key: string;
   name: string;
   title: string;
   blurb: string;
   info: IChampionInfo; // this is an object!
   image: IChampionImage; // this is an object!
   tags: string[]; // this is actually an array
   partype: string;
   stats: IChampionStats; // this is an object!
}

您可以使用自定义管道迭代模板中的每个对象（这是冠军的名称），或者然后操纵您正在接收的数据并将其转换为可以迭代它。我做后者......这样：

首先在你的映射中，我只是得到数组中的对象，所以：

.map(res => res.json()[0]) // get the first and only object

然后订阅：

.subscribe(data => {
  // push the data from outermost data and add array for your champions
  this.championGroup = {type: data.type, format: data.format version:data.version,data:[]}
  // get the object keys (champion names)
  let keyArr: any[] = Object.keys(data.data)
  // for each object key, push its content to array
  keyArr.forEach((key: any) => {
     this.championGroup.data.push(data.data[key]);
  });
});

然后你可以很好地迭代你的数据：

<table class='table table-striped'>
  <thead>
     <tr>
       <th>Champion Name</th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let champion of championGroup?.data">
       <td>{{champion.name}}</td>
     </tr>
  </tbody>
</table>

请注意 safe navigation operator ，它可以保护null和undefined属性路径。

最后使用 PLUNKER 来展示您的部分代码。

请注意嵌套对象，不要尝试迭代它们。例如，您可以在模板中显示attack内的info {{champion?.info?.attack}}。

Answer 2

<span *ngFor="let x of champion.data">{{ x.name }}</span>

span或您需要的任何标签

Answer 3

只需使用 champion.data ，

 <tr *ngFor="let champion of champion.data">
            <td>{{champion.name}}</td>
 </tr>

我如何在类中循环数组 - Angular 2

3 个答案: