如何在 Angular 中使用嵌套 *ngFor

Question

i tried nested for on angular but i can't get exact result. i tried different way but i can't got the exact result of this nested loop function

i want the name wise select box one or more and the option details are contained data field.

i except the nested or any other methods are also okey.

please give the solution.

this is.ts file

 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 file

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

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

Answer 1

The data property is an array of arrays of the form [[{}, {}, {}], [{}, {}, {}]] . So you need one more *ngFor loop to iterate through the elements. Try the following

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