0
1.1K
ViewsCómo implementar * ngFor anidado en angular
Tengo una respuesta json que se ve a continuación:
{ "hotel_name":"name", "hotel_email":"hotel@gmail.com", "contractList":[{ "start_date": "2020-12-2", "end-date":"2020-12-10", }] "roomsList":[{ "type_name":"standard" }, { "type_name":"premium" }] }Quiero imprimir esto en la interfaz de usuario a través de angular. Por lo tanto, utilicé el siguiente código.
<div class="content"> <div fxLayout="row wrap " fxLayoutGap="50px grid"> <div class="grid-container"> <div *ngFor="let hotel of hotels; let i = index;"> <mat-card class="example"> <mat-card-title>{{ hotel.name }}</mat-card-title> <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle> <div *ngFor="let room of hotel[i].roomsList; let j = index "> <mat-card-content > <p>Room Details</p> <p style="color: darkcyan;">room[j].type_name</p> </mat-card-content> </div> </mat-card> </div> </div> </div> </div> Sin embargo, recibo este error en la consola de interfaz de usuario. 
¿Qué estoy haciendo mal? ¿Cuál es la forma correcta de imprimir?
2 answers
Answer question0
Ocurrió un error al intentar acceder al elemento de la matriz del hotel (la variable del hotel no es una matriz. Es un objeto). Puede resolver el problema reemplazando hotel (objeto) con hoteles (matriz) en el segundo bucle anidado
<div class="content"> <div fxLayout="row wrap " fxLayoutGap="50px grid"> <div class="grid-container"> <div *ngFor="let hotel of hotels; let i = index;"> <mat-card class="example"> <mat-card-title>{{ hotel.name }}</mat-card-title> <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle> <div *ngFor="let room of hotels[i].roomsList; let j = index "> <mat-card-content > <p>Room Details</p> <p style="color: darkcyan;">room[j].type_name</p> </mat-card-content> </div> </mat-card> </div> </div> </div> </div>También puede usar For-of-Loop para sus necesidades.
<div class="content"> <div fxLayout="row wrap " fxLayoutGap="50px grid"> <div class="grid-container"> <div *ngFor="let hotel of hotels"> <mat-card class="example"> <mat-card-title>{{ hotel.name }}</mat-card-title> <mat-card-subtitle>{{ hotel.address}}</mat-card-subtitle> <div *ngFor="let room of hotel.roomList"> <mat-card-content > <p>Room Details</p> <p style="color: darkcyan;">room.type_name</p> </mat-card-content> </div> </mat-card> </div> </div> </div> </div>0
Con respecto a su ejemplo json, su código parece incorrecto.
Reemplace let room of hotel[i].roomsList con let room of hotel.roomsList
Y room[j].type_name con room.type_name En su caso, no necesita usar counter var like, i o j .
Su código debe ser como:
<div class="content"> <div fxLayout="row wrap " fxLayoutGap="50px grid"> <div class="grid-container"> <div *ngFor="let hotel of hotels"> <mat-card class="example"> <mat-card-title>{{ hotel.name }}</mat-card-title> <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle> <div *ngFor="let room of hotel.roomsList"> <mat-card-content > <p>Room Details</p> <p style="color: darkcyan;">room.type_name</p> </mat-card-content> </div> </mat-card> </div> </div> </div> </div>