typescript - ¿Cómo implemento una lista desplegable llena de datos con Angular 6?
Soy nuevo en Angular 6, o realmente en Angular en general. Quiero colocar una lista desplegable en mi página que se llenará con valores que obtengo de una solicitud JSON en otro lugar. ¿Cómo podría llevar a cabo esta tarea?
Respuesta #1
// http request with your server data.
options$ = this.yourHttpService.getOptions(API); // returns an Observable
Suponga que el formato JSON es (invocaremos option.value en HTML):
{
value: 'Option1',
otherValue: '....'
}
En tu archivo html, llena las opciones con async:
<select [(ngModel)]="yourOption" id="category">
<option value="" disabled selected>>select an option</option>
<option *ngFor="let option of options$ | async" [value]="option.value">{item.category}}</option>
</select>
Respuesta #2
Suponiendo que tus datos que necesitan ser puestos en la lista desplegable sean en realidad un arreglo:
myData = {data: [v1, v2, v3, v4]};
En tu component.html
<select>
<option *ngFor="let eachVal of myData['data']>
{{eachVal}}
</option>
</select>
debería funcionar.
Dado que no proporcionaste tu fragmento de código, tengo un ejemplo en stackBlitz que utiliza las etiquetas select y option con Angular. Échales un vistazo.
