Question

我正在从json响应填充我的离子列表，如下所示：

{
    "engineering": [{
            "0": {
                "id": 1,
                "name": "Amrita School of Engineering"
            },
            "location": "Kollam"
        },
        {
            "0": {
                "id": 3,
                "name": "Amrita School of Medicine"
            },
            "1": {
                "id": 4,
                "name": "Amrita School of Engineering"
            },
            "location": "Kozhikode"
        }
    ],
    "medicine": [{
            "0": {
                "id": 2,
                "name": "Amrita School of Medicine"
            },
            "location": "Kollam"
        },
        []
    ]
}

我的离子清单是：

 <ion-list no-lines>
        <ion-list-header *ngFor="let details of searchResults?.engineering">
          <div style="background-color:#2f6b8c;padding-top:10px;padding-bottom:10px;padding-left:5px;color:white">{{details.location}}</div>
          <button ion-item *ngFor="let detail of details?.0" (click)="itemSelected(detail.id)">
              <span style="text-transform: capitalize;">{{detail.name}}</span>
          </button>  
        </ion-list-header>
      </ion-list>

我需要的UI是：

kerala是location，而喀拉拉邦的数据应该是0,1的东西。

使用此功能，我可以打印location对象数据，而每个位置都有不同的列表。在上面的JSON中，您可以看到Kollam在工程中只有一个大学名称，所以'0'，而工程学中的kozhikode有2个大学，所以0,1。如果n学院然后0到n数组将在那里..但我怎么能在列表中填充这个？有什么帮助吗？

Answer 1

老实说，如果您可以更改其格式，那么json会很复杂，如果不是，请不要介意这里的解决方案。

创建一个管道（我称之为值），它将我们的对象转换为数组

  import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'value'
    })

        export class ValuePipe implements PipeTransform {

    transform(value: any, args?: any[]): any[] {
            let values = (<any>Object).values(value);      
            return values;
        }

    }

这是html代码

 <ion-list no-lines>
        <ion-list-header *ngFor="let details of searchResults?.engineering">
          <div style="background-color:#2f6b8c;padding-top:10px;padding-bottom:10px;padding-left:5px;color:white">{{details.location}} </div>
          <button ion-item *ngFor='let detail of details | value' (click)="itemSelected(detail.id)"> 
              <span style="text-transform: capitalize;">{{detail.name}}</span> 
          </button>  
        </ion-list-header>
      </ion-list>

这是working DEMO too

Answer 2

为了能够使用* ngFor指令进行迭代，您必须具有“Iterable”，例如数组。在您的情况下，您需要的数据是对象的属性而不是数组。

如果无法修改数据来源以使您的案例更友好，我建议您修改数据客户端。

基本上，在获得此数据后，您需要将其本地转换为：

 uib-typeahead="size.name for sizes in 
       getAttributeType(selected.commodity, 'size')"

}

其中“学校”是包含您需要的新数组。现在的问题是你将如何转换数据。

通常情况下，我会使用in ... for循环遍历您从服务器收到的原始对象：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

在您的情况下，您必须通过阅读原始结构并执行必要的操作来创建此新结构。这可能是我天真的评估。

你很可能需要使用它：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values 见那里的例子。

如果您现在可以解决它，请告诉我。或者如果你挣扎。

在IONIC列表中循环json动态内容数组

2 个答案: