angular - 如何在 Angular 中使用嵌套 *ngFor

问题描述

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

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

我除了嵌套或任何其他方法也可以。

请给出解决方案。

这是 .ts 文件

 getSpecialisationSubSelect(id) {
        this.postjobService.getSpecializationOptionChangeGetValue(id)
          .subscribe(res => {
            if (res !== 0){
              console.log(res);
              this.optionsselects = res;
              this.optionsselectName = res.name;
              this.optionselectSubData = res.data;
              this.defaultOptions = true;
    
              // console.log(this.getOptionsSelect(res));
            }
      });
  }

.html 文件

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

json响应

{
    "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"
            }
        ]
    ]
}

标签： angular

该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 - 如何在 Angular 中使用嵌套 *ngFor

问题描述

解决方案

推荐阅读