将数据从JSON文件绑定到Angular 2 View

Question

我有以下格式的JSON数据

{
  "AttributeSetID": "Smoker",
  "Description": "Smoker",
  "Groups": [
    {
      "AttributeGroupID": "Smoker Air Damper",
      "Description": "Smoker Air Damper",
      "Attributes": [
        {
          "AttributeID": "Air Damper/Vent Location",
          "Options": [],
          "Description": "Air Damper/Vent Location",
          "InputType": "Text Field",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        },
        {
          "AttributeID": "Air Damper/Vent Quantity",
          "Options": [
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "0",
              "Description": "0",
              "Position": 1.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "1",
              "Description": "1",
              "Position": 2.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "2",
              "Description": "2",
              "Position": 3.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "3",
              "Description": "3",
              "Position": 4.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "4",
              "Description": "4",
              "Position": 5.000000000,
              "Default": false
            }
          ],
          "Description": "Air Damper/Vent Quantity",
          "InputType": "Dropdown",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        }
      ]
    },
    {
      "AttributeGroupID": "Smoker Body",
      "Description": "Smoker Body",
      "Attributes": [
        {
          "AttributeID": "Body Color",
          "Options": [
            {
              "AttributeID": "Body Color",
              "OptionID": "Aluminum",
              "Description": "Aluminum",
              "Position": 1.000000000,
              "Default": false
            },    
            {
              "AttributeID": "Body Color",
              "OptionID": "White",
              "Description": "White",
              "Position": 23.000000000,
              "Default": false
            }
          ],
          "Description": "Body Color",
          "InputType": "Multiple Select",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        },
        {
          "AttributeID": "Body Finish",
          "Options": [
            {
              "AttributeID": "Body Finish",
              "OptionID": "Brushed",
              "Description": "Brushed",
              "Position": 1.000000000,
              "Default": false
            },          
            {
              "AttributeID": "Body Finish",
              "OptionID": "Stainless",
              "Description": "Stainless",
              "Position": 14.000000000,
              "Default": false
            }
          ],
          "Description": "Body Finish",
          "InputType": "Multiple Select",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        }       
      ]
    },    
    {
      "AttributeGroupID": "Smoker Wheel",
      "Description": "Smoker Wheel",
      "Attributes": [ null, null ]
    }
  ]
}

这是我的html

 Size: <input name="productSpecificationTemplate?.Groups[0].Attributes[1].Default" [(ngModel)]="productSpecificationTemplate?.Groups[0].Attributes[1].Default">
  Testing Required: <select name="productSpecificationTemplate?.Groups[0].Attributes[0].Default" [(ngModel)]="productSpecificationTemplate?.Groups[0].Attributes[0].Default">
                                <option *ngFor="let color of productSpecificationTemplate?.Groups[0].Attributes[0].Options" value={{color.OptionID}}>
                                    {{color.OptionID}}
                                </option>
                            </select>                               
 Sellable Country(ies):<select name="productSpecificationTemplate?.Groups[1].Attributes[0].Default" [(ngModel)]="productSpecificationTemplate?.Groups[1].Attributes[0].Default">
                                    <option *ngFor="let color of productSpecificationTemplate?.Groups[1].Attributes[0].Options" value={{color.OptionID}}>
                                        {{color.OptionID}}
                                    </option>
                                </select>

我在这里所做的是遍历数组，然后通过绑定将其列出在下拉列表中。 我是根据索引值来做的。

问题是我想根据组的AttributeGroupID和选项的AttributeID进行绑定。 我不确定如何根据元素的ID而不是索引来过滤和绑定值。

如果我没有正确详细说明问题，请告诉我。

谢谢

Answer 1

以下是您要查找的内容吗，我们将嵌套嵌套而不是直接使用索引来编写。 因此，您的模板将如下所示。 我在下面没有列出数组为空的那些Options ：

<!-- Iterate Groups -->
<div *ngFor="let group of productSpecificationTemplate?.Groups">
  <!-- Iterate attributes in each group -->
  <div *ngFor="let attribute of group?.Attributes; let i=index">
    <!-- Do not show select if there is no options -->
    <div *ngIf="attribute?.Options?.length">
      <p>{{attribute.AttributeID}}</p>
      <select [(ngModel)]="attribute.Options[i].Default">
        <!-- Iterate options in each attribute -->
        <option *ngFor="let option of attribute.Options">{{option.OptionID}}
        </option>
      </select>
    </div>
  </div>
</div>

这是一个

演示版