0

Necesito guardar las horas de un día de la semana en una variable. Esta al guardarse y yo mostrarla en el html solo me muestra la última hora siendo que muestra 13 datos, y en el html me muestra el último, en cambio en el la consola me los muestra todos.

Intenté igualarla a horario: String[] = [], pero me daba error. Los datos vienen desde una api y los rescato desde un servicio.

Código .ts:

horario: String


  getHoras() {
    this.cargamasivaService.getCargaMasiva().subscribe((res)=>{
      for(let data of res) {
        if(data.semana === 29) {
          if(data.dia === 'lunes') {
            this.horario = data.horario
            console.log(this.horario)
          }
        }
      }
    })
  }

Como lo muestro en el html:

<span>{{ horario }}</span>

Me muestra solo el último dato.

service:
      selectedCargaMasiva: CargaMasiva={
        _id:'',
        fecha: '',
        dia: '',
        disponibilidad: true,
        horario: '',
        cancha: '',
        precio: 0,
        semana: 0,
      } 

interface:
      export interface CargaMasiva{
         _id: String,
         fecha: String,
         dia: String,
         disponibilidad: Boolean,
         horario: String,
         cancha: String,
         precio: Number,
         semana: Number,
      }

Cómo se ven las horas (horario):
introducir la descripción de la imagen aquí

2
  • ¿Y qué estructura tiene la propiedad hora? ¿Puedes agregar un ejemplo?
    – Lobos
    Commented el 21 jul. 2022 a las 13:37
  • @Lobos ahi edite la pregunta colocando mas codigo del servicio la interface y como se me muestra en consola las horas, soy nuevo en esto disculpa. las horas vienen de una api y son un string Commented el 21 jul. 2022 a las 13:43

2 respuestas 2

0

Puedes declarar horario como un arreglo y en cada iteración agregarle un nuevo valor.

ts

horario: string [] = []

 getHoras() {
    this.cargamasivaService.getCargaMasiva().subscribe((res)=>{
      for(let data of res) {
        if(data.semana === 29) {
          if(data.dia === 'lunes') {
            this.horario.push(data.horario)
          }
        }
      }
    })
  }

html

<span>{{ horario.join(', ') }}</span>
1
  • Genial bro ahi te di el punto me srivio, muchisimas gracias man. Commented el 21 jul. 2022 a las 14:20
0

no puedes hacer una logica en el .ts que recorra un for y esperar que al igualar su valor a una variable te imprima cada uno de ellos en el .html, por que en teoria tu this.horario = data.horario se esta reemplazando con cada iteracion que recorre tu for y al terminar su ultimo valor seria el ultimo de tu lista por eso solo imprime un valor, deberias igualar res que es la respuesta de tu servicio a una variable global this.variable = res y recorrerla en tu .html con un ngFor ejemplo *ngFor="let data of variable" y alli puedes hacer la logica que tenias en tu .ts

1
  • normalmente eso estaba haciendo recorriendo y haciendo las condiciones en el html, directamente con el service pero me distorcionaba mucho el codigo usando css grid de tanto ng-container con condiciones, en ves de ponerme los datos en columna al lado de uno se posicionaban abajo y al lado no se si me explico y en stackoverflow ingles me dijieron que usara mas la logica en el .ts y ahi usarla en el html por que mis condiciones eran absurda en el html. Commented el 21 jul. 2022 a las 14:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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