How to populate the option items from the service-CodePudding

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      required>
<option>
//code 
</option>
</select>

CodePudding user response：

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

CodePudding user response：

If you have Only on List

Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]

Use this Way

<select  *ngFor="let optionCode of Option1Codes"    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"    required>
    <option>
    {{optionCode?.Category}}
    </option>
    </select>