如何获取本地json文件并重复数据？答案

【问题标题】：How to get json file local and repeat data?如何获取本地json文件并重复数据？
【发布时间】：2018-02-06 06:51:06
【问题描述】：

我是 angular5 的新手，我正在尝试加载 json 文件并重复它，但我无法重复数据

（我可以从 jason 文件中获取和显示数据，但不能重复数据）

在 src/assets/data.json 中

{ "status": "S","messeage": "error","Card":[
{
  "ID": "01",
  "Price": "30,000",
  "Color": "Black"
},
{
  "ID": "02",
  "Price": "32,000",
  "Color": "Red"
}]}

在 src/app/app.component.ts 中

data;
      constructor(private http:Http) {
            this.http.get('../assets/data.json')
            .subscribe(res => this.data = res.json());

      }

在 src/app/app.component.html 中

{{data?.Card[0].Color}} // => black

{{data?.Card[0].Price}} // => 30,000

但我需要知道如何重复它。

对不起我的英语

感谢您的帮助

编辑

最后 2 个回答有效但它在控制台中有错误

如何解决？非常感谢

enter image description here

【问题讨论】：

标签： json angular

【解决方案1】：

现在你得到了你的 json。

你可以这样重复

在js代码中。

for(i=0;i<data.Card.length;i++){
console.log(data.card[i].Color);
}

在angular5 html模板中

 <li *ngFor="let card of data.Card"> 
    {{ card.Color}}
  </li>

【讨论】：

【解决方案2】：

您可以在模板中使用 *ngFor 指令来重复它。

示例<div *ngFor="let obj of data.Card"> <div>{{obj.Color}}</div> <div>{{obj.Price}}</div> </div>

【讨论】：