I have an angular application In this I haveto populate the dropdown lsts from the backend.
.component.ts
public getMemberCodes() {
let baseUrl = `/endpoindAPI`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(actionLookupData: ActionLookupData) => {
if (actionLookupData) {
this.option1Codes = actionLookupData.Option1Codes;
this.option2Codes = actionLookupData.Option2Codes;
this.option3Codes = actionLookupData.Option3Codes;
}
},
(err) => {
console.error(err);
}
);
}
From the above service I have to populate the values of Categories from each one like this.option1Codes,this.option1Codes..etc
the response is like below:
Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}] Option2Codes: [{Category: "Category2", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]
From the above array I have to populate only Category values in dropdown lists from the backend.
.component.html
<select class="form-control" required>
<option>
//code
</option>
</select>
You can use the ngFor directive:
<select *ngFor="let optionCode of OptionCodes"> {{ link }}
I would recommend you have a look at the official documentation on the matter
If you have Only on List
Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]
Use this Way
<select *ngFor="let optionCode of Option1Codes" class="form-control" required>
<option>
{{optionCode?.Category}}
</option>
</select>
As I see You have three List option1Codes,option2Codes,option3Codes.
If you want It in one list then you have to add all list in one Array Like this...
let list = [...option1,...option2,...option3];
<select *ngFor="let optionCode of list" class="form-control" required>
<option>
{{optionCode?.Category}}
</option>
</select>