如何在 angular 中实现嵌套 *ngFor

Question

我有 json 回复，如下所示：

{
"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"
             }]
}

我想通过 angular 将此打印到 UI。因此我使用了下面的代码。

<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>

但是，我在 UI 控制台中收到此错误。我究竟做错了什么？正确的打印方式是什么

Answer 1

关于您的示例 json，您的代码似乎有误。

将let room of hotel[i].roomsList替换为let room of hotel.roomsList
room[j].type_name 和 room.type_name 在您的情况下，您不需要使用 i 或 j.

之类的计数器变量

你的代码应该是这样的：

<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>

Answer 2

您尝试访问酒店的数组元素时发生错误（酒店变量不是数组。它是一个对象）。您可以通过在第二个嵌套循环

中将 hotel(object) 替换为 hotels(array) 来解决问题

<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>

您也可以根据需要使用 For-of-Loop。

<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>

如何在 angular 中实现嵌套 *ngFor

How to implement nested *ngFor in angular

json

angular

ngfor