首页 文章

当密钥未知时，在ngFor中解析嵌套的JSON

提问于
浏览 次
2
<select class="form-control selectpicker" data-style="form-control btn-primary" [(ngModel)]="serverName"  >
      <option  data-content="<i class='glyphicon glyphicon-cutlery'></i>" *ngFor="let instance of instances" [ngValue]="instance.insturl">{{instance.name}}</option>
    </select>

这是我的HTML选择器

早些时候，当我保持平坦的层次结构时，它正在工作！

instances= [ {instanceurl: 'http://instances-url',
      name: 'instance-name', versionURL: '2017.6'},
    {instanceurl: 'http://instances-url',
      name: 'machine name', versionURL: '2017.5'
    }];

但现在我把它嵌套了，因为我想将对象传递给后端而不是值 .

instances= [ {name:
        {'instance-name(this is dynamic)':{
                  instanceurl: 'http://instances-url',
               , versionURL: '2017.6'}}},
{name:
    {'machine name(this is dynamic)':{
              instanceurl: 'http://instances-url',
           , versionURL: '2017.5'}}}
            ];

现在这不起作用！如何绕过ngFor并仍然获得与以前相同的值？我知道当我执行ngFor实例实例时，它会给我数组对象 . 所以我可以做instance.name，但它会返回一个我不知道的键对象，因为它是动态的 . 如何通过这个嵌套的json？

javascript json angular

3 回答

  • 0

    对于这个json数据：

    instances= [ 
    {
        name:
        {
            'instance-name(this is dynamic)':
            {
                instanceurl: 'http://instances-url',
                versionURL: '2017.6'
            }
        }
    },
];

    你可以使用 Object.keys ：

    <option  
    data-content="<i class='glyphicon glyphicon-cutlery'></i>" 
    *ngFor="let instance of instances" 
    [ngValue]="instance['name'][Object.keys(instance['name'])[0]].instanceurl">
    {{instance.name}}
</option>
    回复于
  • 1

    你可能会做的是你可以重复你在嵌套JSON中找到的所有可能的条目 . 为了安全起见，只有在模型中存在 safe navigation operator ? 才能反映在DOM中 . 例如，您可以执行以下操作：

    {{instance?.name}} {{instance?.machineName}}

    这似乎是一种可以高效工作的解决方法 .

    回复于
  • 0

    您应该处理您的数据：

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

@Pipe({name: 'myfilter'})
export class MyFilter implements PipeTransform {
  transform(instances) {
    return instances.map(function(a){
        var name = Object.keys(a.name)[0];
        return {name, insturl: a.name[name].instanceurl};
    });
  }
}

<select class="form-control selectpicker" data-style="form-control btn-primary" [(ngModel)]="serverName"  >
      <option  data-content="<i class='glyphicon glyphicon-cutlery'></i>" *ngFor="let instance of instances | myfilter" [ngValue]="instance.insturl">{{instance.name}}</option>
</select>
    回复于

相关问题