1

Tengo el arreglo de datos como el siguiente:

export class Tiendas {

  public ags:   string[];
  public bc:    string[];

  constructor() {
    this.ags   = [
      'Texto',
      'De'
    ];
    this.bc    = [
      'Ejemplo',
      '...'
    ];
  }
}

Guardo esa información en mi component.ts de la siguiente forma:

tiendas = new Tiendas();

Lo cual lo guarda correctamente, lo puedo comprobar imprimiendo en html o con un console.log

Tengo que mostrar el contenido de estos arreglos en un utilizando un ngFor.

Primero tengo un para seleccionar un estado del país, y dependiendo del valor tengo que mandar llamar los datos del arreglo correspondiente de la clase Tienda.

<div class="form-group">
  <label for="estado">Estado</label><br>
  <select
    required
    formControlName="estado"
    name="estado"
    class="form-control selectbox"
    #paisSel>
    <option value="">
      Selecciona tu Estado
    </option>
    <option *ngFor="let estado of estados" [value]="estado.key">
        {{estado.nombre}}
    </option>
  </select>
</div>

Este segundo select debe llenarse de <option> dependiendo de la selección en el paso anterior.

<div class="form-group">
  <label for="tienda">Selecciona tu tienda más cercana</label><br>
  <select
    required
    formControlName="tienda"
    name="tienda"
    class="form-control selectbox">
    <option value="">
      Selecciona tu tienda
    </option>
    <option
        *ngIf="paisSel.value != ''">
        tienda
    </option>
  </select>
</div>

Tengo que mandar a llamar este contenido en

    <option
        *ngIf="paisSel.value != ''">
        tienda
    </option>

Hasta ahora he intentado:

<option
    *ngIf="paisSel.value != ''"
    *ngFor="let tienda of tiendas.bc.length">
  XXXX
</option>


<option
    *ngIf="paisSel.value != ''"
    *ngFor="let i = tiendas.bc.length">
  {{ i }}
</option>

Pero ninguna compila. ¿Saben de alguna manera adecuada para hacer esto?

1

2 respuestas 2

1

Klaimmore,

Hola, simplemente tienes que hacer la misma logica que para el caso de los estados.

En las tiendas tu tienes 2 colecciones; ags y bc

  <option
    *ngIf="paisSel.value != ''"
    *ngFor="let tienda_ags of tiendas.ags">
  {{tienda_ags }}
</option>


<option
    *ngIf="paisSel.value != ''"
    *ngFor="let tienda_bs of tiendas.bc">
  {{ i }}
</option>
0

no puedes poner *ngIf y *ngFor en el mismo elemento. Prueba a poner la sentencia *ngIf en el select, y el *ngFor en los option. Resumiendo, serían select diferentes según la selección previa, en vez de opciones diferentes. Quedaría algo así:

<select *ngIf="paisSel.value != ''">
   <option *ngFor="let tienda_ags of tiendas.ags">
      {{tienda_ags }}
    </option>
</select>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.