Question

我尝试嵌套在角上，但无法获得确切的结果。我尝试了不同的方法，但无法获得此嵌套循环函数的确切结果

我要明智地选择一个或多个选择框，并且选项详细信息包含在数据字段中。

除嵌套或任何其他方法之外的其他方法也都不错。

请给出解决方案。

这是.ts文件

<div class="col-lg-4 col-md-4" *ngFor="let opt of optionsselectName; let i = index" >
                            <select name="" class="form-control custom-select">
                              <option value="">{{ opt }}</option>
                                <option
                                  class="select-option-text"
                                  *ngFor="let optsval of optionselectSubData"
                                  value="{{ optsval.value }}">{{ optsval.name }}
                                </option>
                            </select>
                          </div>

html文件

{
    "count": 2,
    "name": [
        "Spec-1",
        "Spec-1-2"
    ],
    "list": [
        16,
        19
    ],
    "data": [
        [
            {
                "operationDropDownId": 43,
                "optionMasterId": 16,
                "name": "Spec-1-Option-1",
                "value": "spec-1-option-1",
                "status": "active",
                "createdAt": "2020-07-06 10:07:33",
                "updatedAt": "2020-07-06 10:07:33"
            },
            {
                "operationDropDownId": 44,
                "optionMasterId": 16,
                "name": "Spec-1-Option-2",
                "value": "spec-1-option-2",
                "status": "active",
                "createdAt": "2020-07-06 10:07:33",
                "updatedAt": "2020-07-06 10:07:33"
            },
            {
                "operationDropDownId": 45,
                "optionMasterId": 16,
                "name": "Spec-1-Option-3",
                "value": "spec-1-option-3",
                "status": "active",
                "createdAt": "2020-07-06 10:07:33",
                "updatedAt": "2020-07-06 10:07:33"
            }
        ],
        [
            {
                "operationDropDownId": 52,
                "optionMasterId": 19,
                "name": "Spec-1-Option-2-1",
                "value": "spec-1-option-2-1",
                "status": "active",
                "createdAt": "2020-07-06 10:16:40",
                "updatedAt": "2020-07-06 10:16:40"
            },
            {
                "operationDropDownId": 53,
                "optionMasterId": 19,
                "name": "Spec-1-Option-2-2",
                "value": "spec-1-option-2-2",
                "status": "active",
                "createdAt": "2020-07-06 10:16:40",
                "updatedAt": "2020-07-06 10:16:40"
            },
            {
                "operationDropDownId": 54,
                "optionMasterId": 19,
                "name": "Spec-1-Option-2-3",
                "value": "spec-1-option-2-3",
                "status": "active",
                "createdAt": "2020-07-06 10:16:40",
                "updatedAt": "2020-07-06 10:16:40"
            }
        ]
    ]
}

json响应

Index | Value
______|_______
0     | 1.1
0     | 0.3
1     | 1
2     | 0.2
2     | 3
2     | 1.3

Answer 1

data属性是[[{}, {}, {}], [{}, {}, {}]]形式的数组的数组。因此，您还需要一个*ngFor循环来遍历元素。尝试以下

<div class="col-lg-4 col-md-4" *ngFor="let opt of optionsselectName; let i = index" >
  <select name="" class="form-control custom-select">
    <option value="">{{ opt }}</option>
    <ng-container *ngFor="let optsval of optionselectSubData">
      <option
        class="select-option-text"
        *ngFor="let opts of optsval"
        value="{{ opts.value }}">{{ opts.name }}
      </option>
    </ng-container>
  </select>
</div>

如何在Angular中使用嵌套* ngFor

1 个答案: