带有json中自定义键的离子ngfor答案

【问题标题】：Ionic ngfor with custom key in json带有json中自定义键的离子ngfor
【发布时间】：2019-01-29 15:29:20
【问题描述】：

您好，我在离子应用程序中有以下 json 更新我将其更改为从 api 获取数组，然后得到以下内容

{
"chest": {
    "chest": {
        "1": [
            "1",
            "2"
        ],
        "3": [
            "1",
            "2",
            "3"
        ]
    },
    "hints": {
        "1": [
            "test1"
        ],
        "3": [
            "test2"
        ]
    }
},

如何使用显示键和值我试试下面的

  <ion-item *ngFor="let chest of workout.data.chest;let i=index" (click)="openNew(new.id)" detail-push >

<b> {{ chest}} </b> <br>

  <span *ngFor="let exercise of chest.chest |keys ">   
  <span *ngFor="let hints of chest.hints |keys ">        
  Machine: {{exercise.key}}, Days: {{exercise.value}}  
, Hints: {{hints.value}} <br>

我在上面尝试，但我在错误的地方提示，我得到重复的记录

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

*ngFor 仅支持绑定到 Iterables，例如 Arrays。首先将您的 Json 对象解析为数组，然后将该数组与 *ngFor 一起使用。

【讨论】：

好的，我使用 Json 解析并得到以下信息，我如何将它与 ngfor {chest: {…}, hints: {…}} chest : 1 : Array(2) 0 : "1" 1 : "2" length : 2 __proto__ : Array(0) 3 : Array(3) 0 : "1" 1 : "2" 2 : "3" length : 3 __proto__ : Array(0) __proto__ : Object hints : 1 : Array(1) 0 : "test1" length : 1 __proto__ : Array(0) 3 : Array(1) 0 : "test2" length : 1 __proto__ : Array(0) __proto__ : Object __proto__ : Object 一起使用
你不能使用它。您应该根据您的要求将您的 json 重新排列到一个数组中。
我能从我的 api 或 ionic 中做些什么？
如果能在api里做就更好了
我从 api 获取数组，但我仍然无法在 html 中打印它们

【解决方案2】：

解决了

<div *ngIf="chest">

<ion-label color="danger" ><b>Chest</b></ion-label>
<ion-grid>
    <ion-row text-wrap>
        <ion-col width-25 >Exercises</ion-col>
        <ion-col width-25 >Machine ID</ion-col>
        <ion-col width-25 >Days</ion-col>
        <ion-col  width-25>Hints</ion-col>
      </ion-row> 
    <ion-row text-wrap *ngFor="let exercise of chest.chest |keys">
        <ng-container  *ngFor="let machine of MachinesDetails "> 
            <ng-container  *ngIf="machine.machine_no == exercise.key">

      <ion-col > {{machine.name}}</ion-col>
      <ion-col > {{machine.machine_no}}</ion-col>
    </ng-container >
    </ng-container >
      <ion-col > {{exercise.value}}</ion-col>
      <ng-container  *ngFor="let hints of chest.hints[exercise.key] |keys ">        
          <ion-col > {{hints.value}} </ion-col>
    </ng-container >
    </ion-row>
  </ion-grid>

【讨论】：