2017-06-21 72 views
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選擇解析在ngFor嵌套JSON在密鑰未知

此前據工作時,我保持着平坦的層次!

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?

+0

你的JSON結構似乎有一些問題。我會從第一個開始! 「名稱」不是新對象中的名稱,它是具有其他屬性的對象?然後在裏面,你有'實例名稱(這是動態的)'作爲另一個對象的名稱... 真的最好不要使用動態名稱,並有一個相當規則或靜態的JSON結構。 我無法真正想到爲什麼你需要這樣一個動態結構的任何好理由。處理它的方法相當複雜! (你必須遍歷數組,存儲一個不同名稱的列表,然後檢查它們全部) – NightCabbage

+0

@NightCabbage那麼我怎樣才能構造它?整個想法是在下拉菜單中顯示機器名稱!在平面層次結構中,我有名稱:機器名稱現在很簡單它不是:( –

回答

0

你可能會做的是你可以重複所有可能的條目,你可以在你的嵌套JSON中找到。爲了安全起見,只有存在於模型中,纔可以使用safe navigation operator ?來反映DOM。例如,你可以這樣做:

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

這似乎是一個解決辦法,這將有效地工作。

+0

機器名稱動態更改我不知道名稱後鍵值下一個鍵的值是什麼:它裏面的值 –

+0

我認爲沒有另一種方式是以有組織的方式構建模型,以便觀察和訂閱僅由您推薦的數據。如果您不知道接收到的數據,那麼您無法控制數據。 –

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> 
+0

謝謝,但我需要它作爲一個下拉!我正在考慮使用管道! –

+0

但是我怎樣才能在ngFor中得到這個,這樣我就可以顯示機器名稱作爲選擇選項? –

+0

@RaghavendraSS,現在它被呈現爲'Pipe'。 –

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> 
+0

我不能使用[0],因爲如果數組中有多個JSON對象,它將只檢索第一個! –

+0

它只是爲了獲取關鍵字的名字而已,它將起作用。 –