Tengo una aplicación angular En esto, tengo que completar las listas desplegables desde el backend.
.componente.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); } ); }Del servicio anterior, tengo que completar los valores de las Categorías de cada una como this.option1Codes,this.option1Codes..etc
la respuesta es la siguiente:
Option1Codes: [{Categoría: "Category1", ActionStatusTypeID: 1, Complete", ActionID: 5060,…}] Option2Codes: [{Category: "Category2", ActionStatusTypeID: 1, Complete", ActionID: 5060,…}]
De la matriz anterior, tengo que completar solo los valores de Categoría en las listas desplegables desde el backend.
.componente.html
<select class="form-control" required> <option> //code </option> </select>Puede usar la directiva ngFor:
<select *ngFor="let optionCode of OptionCodes"> {{ enlace }}
Te recomiendo que eches un vistazo a la documentación oficial sobre el tema.
Si tiene solo en la lista
Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]Usar de esta manera
<select *ngFor="let optionCode of Option1Codes" class="form-control" required> <option> {{optionCode?.Category}} </option> </select>Como veo, tiene tres opciones de Lista 1 Códigos, opción 2 Códigos, opción 3 Códigos.
Si lo quiere en una lista, debe agregar todas las listas en una matriz como esta ...
let list = [...option1,...option2,...option3]; <select *ngFor="let optionCode of list" class="form-control" required> <option> {{optionCode?.Category}} </option> </select>