Búsqueda de sitios web

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.

Artículos relacionados