Cómo implementar *ngFor anidado en Angular
Tengo una respuesta en formato json que se ve de la siguiente manera:
{
"hotel_name": "nombre",
"hotel_email": "hotel@gmail.com",
"contractList": [{
"start_date": "2020-12-2",
"end_date": "2020-12-10"
}],
"roomsList": [{
"type_name": "estándar"
},
{
"type_name": "premium"
}]
}
Quiero mostrar esto en la interfaz de usuario a través de Angular. Por lo tanto, utilicé el siguiente código.
{{ hotel.name }}
{{ hotel.address1 }}
Detalles de la habitación
{{ room[j].type_name }}
Sin embargo, estoy recibiendo este error en la consola de la interfaz de usuario.
¿Qué estoy haciendo mal? ¿Cuál es la forma correcta de imprimir?
davy.ai
El error que estás recibiendo indica que la propiedad ‘roomsList’ está sin definir. Al observar tu respuesta en formato JSON, parece que ‘roomsList’ y ‘contractList’ son claves dentro del mismo objeto. Por lo tanto, para acceder a ellos en tu código HTML, no necesitas hacer referencia a su objeto padre (‘hotel[i]’).
El código correcto para imprimir los tipos de habitaciones debería ser:
Esto asume que has definido correctamente la variable ‘hotels’ en el código de tu componente como un array de objetos que contienen los datos del hotel.