data is not showing in dropdown template driven form

Question

there is a template-driven form and within this form, there is a dropdown. I want to show data from the backend to the dropdown.

Here data is coming from the backend in appliesWhenData.

<form #appliesWhen="ngForm">
        <section class="form-inline" *ngFor="let awhen of appliesWhenData; let i = index;">
          <div class="col-auto my-1">
            <select class="custom-select mr-sm-2 form-control">
              <option [ngValue]="" disabled >Select field</option>
              <option [ngValue]="f" *ngFor="let f of fieldList">{{f.displayName}}
              </option>
            </select>
          </div>
</section>
</form>

and if I log appliesWhenData it will print:

[
  {
    "id": 1,
    "detailSrl": 5,
    "value": "123",
    "local_id": 1,
    "fieldListDetail": {
      "id": 5,
      "fieldName": "officeLocation",
      "displayName": "OfficeLocation"
    },
    "conditionListDetail": {
      "id": 1,
      "condition": "Equals"
    }
  },
  {
    "id": 2,
    "detailSrl": 5,
    "value": "321",
    "local_id": 2,
    "fieldListDetail": {
      "id": 3,
      "fieldName": "productType",
      "displayName": "ProductType"
    },
    "conditionListDetail": {
      "id": 4,
      "condition": "LessThanEquals"
    }
  }
]

What I have tried so far:

<form #appliesWhen="ngForm">
        <section class="form-inline" *ngFor="let awhen of appliesWhenData; let i = index;">
          <div class="col-auto my-1">
            <select class="custom-select mr-sm-2 form-control" [(ngModel)]="awhen.fieldListDetail" name="fieldName{{ awhen.id }}">
              <option [ngValue]="" disabled >Select field</option>
              <option [ngValue]="f" *ngFor="let f of fieldList">{{f.displayName}}
              </option>
            </select>
          </div>
</section>
</form>

Only I need to show selected data in drop. The selected data coming from backend is in appliesWhenData.fieldListDetail and the list which will be there is fieldList. Please help!

Answer 1

Please try binding data like this:

          <option [ngValue]="f" *ngFor="let f of fieldList">{{f.fieldListDetail.displayName}}
          </option>