我如何循環一個類中的數組 - 角2 2

Question

我想循環一個名爲數據的數組，在另一個數組中填充'冠軍'這是什麼正確的語法？我可以高興地循環我所有的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>