将 JSON 文件中的数据绑定到 Angular 2 视图

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>

这是一个

Demo