Question

我是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

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

Answer 2

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

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

如何获取json文件本地和重复数据？

2 个答案: