如何从嵌套 Json 数组角度 2 打印和分离键和值并将其添加到选择框中

Posted 2023-03-13

【中文标题】如何从嵌套 Json 数组角度 2 打印和分离键和值并将其添加到选择框中

【英文标题】：How to print and separate key and values from Nested Json array angular 2 and add it in a a select box

【发布时间】：2018-03-16 20:40:17

【问题描述】：

我有一个 Json 数据模型，我想从中获取数据并将其添加到选择框中作为我的下拉项。 在这样做时，我在将数据提取到选择框时遇到了困难。 迭代工作正常。但是整个 Json 数组正在被打印出来。我只想打印我的 3 个主要标题。

错误消息：-错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到数组等 Iterables。

我也在添加我的示例 Json 和预期输出

预期输出

LEED V4 BD+C LEED V4 ID+C LEED V4 EBOM

Json 示例

    "Ratings": 
        "LEED V4 BD+C": [

        ],
        "LEED V4 ID+C": [

        ],
        "LEED V4 EBOM": [

        ]
    

app.ts

 template: `
            <div class="col-md-6 form-group">
               <label class="control-label">Rating System <span style="color: #2196f3;">*</span></label>
                <select class="form-control" id="productparameter" *ngFor="let item of ratings.Ratings" >
                <option value="">Select Rating</option>
                <option value="">item</option>
              </select>
              </div>
  `,
)

export class App 
 public ratings: any =
    "Ratings": 
        "LEED V4 BD+C": [

        ],
        "LEED V4 ID+C": [

        ],
        "LEED V4 EBOM": [

        ]
    

  constructor( ) 

    console.log( this.ratings.Ratings);

  

添加我的插件链接：-https://plnkr.co/edit/pgbeS9iRkAzgWVNrLNQJ?p=preview

【参考方案1】：

首先，您需要在option 中使用ngFor，而不是select 框本身。

<select class="form-control" id="productparameter"  >
   <option value="">Select Rating</option>
   <option *ngFor="let item of elements" value="">item</option>
</select>

您可以在组件模型中声明一个array，它将采用Object.keys(this.ratings.Ratings)，所有可能的密钥都将存储在其中。

public elements: any = Object.keys(this.ratings.Ratings);

然后在你的ngFor 中使用这个新的array，如下所示：

*ngFor="let item of elements"

这是your updated Plunkr。

【参考方案2】：

我没有得到你想要显示的内容，但我试过了：

//our root app component
import Component, NgModule, ChangeDetectorRef,Pipe from '@angular/core'
import BrowserModule from '@angular/platform-browser'
import FormsModule from '@angular/forms'

@Component(
   selector: 'my-app',
   template: `
        <div class="col-md-6 form-group">
           <label class="control-label">Rating System <span style="color: #2196f3;">*</span></label>
            <select class="form-control" id="productparameter">
            <option value="">Select Rating</option>
            <option value="" *ngFor="let rat of rating">rat</option>
          </select>
          </div>`,
   )

  export class App 

     public rating : any = ["LEED V4 BD+C":["One"],"LEED V4 ID+C":["two"],"LEED V4 EBOM":["Three"]]
    constructor( ) 

  

 @NgModule(
   imports: [ BrowserModule, FormsModule ],
   declarations: [ App ],
   bootstrap: [ App ]
 )
 export class AppModule 

它的输出将是：