Question

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

Answer 1

您应该处理您的数据：

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>

Answer 2

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

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

这似乎是一种可以有效运作的解决方法。

Answer 3

对于这个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>

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

3 个答案: