在模板Ionic 2和Angular 2中读取.json

时间:2016-10-17 17:43:30

标签: json angular ionic2

模板无法读取* ngFor ="让git of user.ball"什么问题 ??? 如何从json获得阵列球?我正在训练,但它不起作用

我的模板

<div *ngSwitchCase="'userpage'">
      <ion-card>
          <ion-card-content>``
            <ion-list no-lines>
              <ion-item *ngFor="let profile of users">
                <ion-avatar item-left>
                  <img [src]="profile.img">
                </ion-avatar>
                <h2>{{profile.name}}</h2>
                <p>{{profile.about}}</p>
              </ion-item>
            </ion-list>
          </ion-card-content>
      </ion-card>
  </div>  

<!-- Баллы и Достижения -->
<div *ngSwitchCase="'info2'">
      <ion-card>
          <ion-card-content>
  <ion-item *ngFor="let git of user.ball">
              <ion-icon name='planet' item-left></ion-icon>
         {{git.name}}
              <ion-note item-right>
         {{git.score}}
              </ion-note>
            </ion-item>
          </ion-card-content>
      </ion-card>
   </div>
 </div>

.json这是我的Api用户从这里我拿球阵,但离子不能读或我有错误我不知道帮助pleace !!!

[
  {
    "id": 1,
    "name": "It Developer",
    "img": "/assets/img/1_kanal.png",
    "email": "example@example.ru",
    "surname": "IT app",
    "balls": "400",

     "ball": [ 
      {
         "id": 1,
         "name": "Активность",
         "score": "100"
      },
      {
         "id": 2,
         "name": "Добавления Комментарии",
         "score": "150"
      },{
         "id": 3,
         "name": "Репост в Соц Сеть",
         "score": "200"
      },
      {
         "id": 4,
         "name": "Лайк",
         "score": "50"
      }
    ]
  }
]

1 个答案:

答案 0 :(得分:0)

注意:答案仅针对此显示的对象。答案可能因你的json而异。

让我们说

this.users = [
  {
    "id": 1,
    "name": "It Developer",
    "img": "/assets/img/1_kanal.png",
    "email": "example@example.ru",
    "surname": "IT app",
    "balls": "400",

     "ball": [ 
      {
         "id": 1,
         "name": "Активность",
         "score": "100"
      },
      {
         "id": 2,
         "name": "Добавления Комментарии",
         "score": "150"
      },{
         "id": 3,
         "name": "Репост в Соц Сеть",
         "score": "200"
      },
      {
         "id": 4,
         "name": "Лайк",
         "score": "50"
      }
    ]
  }
]

要访问ball array,您应该执行以下操作,

<div *ngFor="let git of users[0].ball">  // user[0] refers to 0th element of users array.
        {{git.id}}-{{git.name}}-{{git.scrore}}
</div>

DEMO:https://plnkr.co/edit/WWbTRASJCuz8UMi18JP7?p=preview