0

como estan?, necesito una ayuda, resulta que tengo una api, el cual contiene los siguientes datos

{
    "id": "249942",
    "name": "Hotel Stefanos",
    "stars": 3,
    "price": 994.18,
    "image": "4900059_30_b.jpg",
    "amenities": [
      "safety-box",
      "nightclub",
      "deep-soaking-bathtub",
      "beach",
      "business-center"
    ]
  },

entonces, en el apartado "amenities" se ven varios datos, estos son los id de varias imagenes que estan guardadas localmente, lo que necesito es insertar todas esas imagenes y que me las muestre en la pagina web, es decir, dependiendo el nombre insertar la imagen, eso si deben insertarse de una sola vez, no he encontrado la forma de realizarlo, estoy trabajando con angular y este es mi html hasta el momento

<body>
  <div class="contenedor">
    <header class="header">
      <app-footer></app-footer>
    </header>
    <main class="contenido">
      <div class="form-group">
        <img class="imgbusqueda" src="../assets/icons/filters/search.svg">
        <input type="text" class="forms-control" placeholder="Buscar Hotel" [(ngModel)]="FilterPipe"
          name="FilterPipe" />
          <div></div>
      </div>
    </main>
    <aside class="sidebar">
      <div class="row">
        <ul>
          <li class="lista-hoteles">
            <div class="lista" *ngFor="let hoteles of hoteles | filter:FilterPipe, FilterStar " >
              <div class="card">
                <div class="card-inner">
                  <div class="image">
                    <img class="card-img-top" src="assets/images/hotels/{{hoteles.image}}">
                  </div>
                  <div class="namehotel">
                    <h2 style="color:rgb(57, 67, 194)"><strong>{{hoteles.name}}</strong></h2>
                  </div>
                  <div class="estrellas">
                    <h3>Esrellas: {{hoteles.stars}} </h3>
                    <img src="assets/icons/filters/star.svg" repeat="{{hoteles.stars}}" width="40px" height="40px">
                  </div>
                  
                  <div class="parrafo">
                    <p>Precio por noche habitacion</p>
                    <div class="valorhab">
                      <p id="precio" style="color:rgb(238, 166, 11)" font-size="20"> ARS
                        <strong>{{hoteles.price}}</strong></p>
                    </div>
                    <div class="boton">
                      <button type="button" class="btn btn-primary">VER HOTEL</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </aside>

    <footer class="footer">
      <h3>Andres Rozo</h3>
    </footer>
  </div>
</body>

ahora mi pagina se ve asi introducir la descripción de la imagen aquí

1
  • Bienvenido a Stack Overflow en español. Te invito a leer Cómo preguntar y a realizar el recorrido de bienvenida. Por favor edita tu pregunta haciendo clic en editar y cambia las imágenes por el código en formato de texto. Puedes leer ejemplo mínimo verificable. Para reproducir tu problema habría que transcribir el código desde la imagen, lo cual es propenso a errores, además de ser una tarea que no todos estamos dispuestos a hacer. En cambio, copiar y pegar texto es mucho más fácil y rápido, entre otras muchas razones. Saludos el 10 jul. 2021 a las 19:23

1 respuesta 1

0

Se puede usar el pipe keyvalue para convertir el objecto amenities en un arreglo de tipo clave-valor luego iterarlo y crear una imagen por cada entrada.

<div class="lista" *ngFor="let hotel of hoteles | filter:FilterPipe, FilterStar">
    <img *ngFor="let item of hotel.amenities | keyvalue" 
       src="assets/images/hotels/{{item.value}}">
</div>

Tu Respuesta

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

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