angular - *ngFor - 循环迭代没有发生。仅显示对象的一个​​元素而不是全部（在 Angular 12 中）

Question

我的对象数组没有在 UI 中循环。我只能得到一个元素。我究竟做错了什么？请帮助纠正这个问题。

我的component.html文件如下：

<div class="card" *ngFor="let regionList of regionLists; let i = index" [attr.data-index]="i">
  <div class="card-body">
    {{ regionList.output.list[i].region }}
  </div>
</div>

我的 componnent.ts - 我为演示目的提供了两个对象，我需要在其中显示区域，即输出应该有 2 张卡，而我只得到一张

import { query } from '@angular/animations';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'apiDemoApp';
  query:string;
  regionLists:any[];

  
constructor(){
  this.query="ramlal";
  this.regionLists=[{
    "transactionId":"abc",
    "output":{
       "list":[
          {
             "region":"Africa",
             "apis":[
                {
                   "name":"Address Validation",
                   "status":"Operational",
                   "time":"98%",
                   "sec":"160ms"
                },
                {
                  "name":"Address Validation",
                  "status":"Operational",
                  "time":"98%",
                  "sec":"160ms"
               }, {
                "name":"Address Validation",
                "status":"Operational",
                "time":"98%",
                "sec":"160ms"
             },

                {
                   "apiName":"Locations",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Pickup",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Track",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Rate",
                   "rateSubApis":[
                      {
                         "apiName":"Rate Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                },
                {
                   "apiName":"Ship",
                   "shipSubApis":[
                      {
                         "apiName":"Ship Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                }
             ]
          },
          {
             "region":"Americas and Caribbean",
             "apis":[
                {
                   "apiName":"Address Validation",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Locations",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Pickup",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Track",
                   "status":"Operational",
                   "upTime":"98%",
                   "avgResponseTime":"160ms"
                },
                {
                   "apiName":"Rate",
                   "rateSubApis":[
                      {
                         "apiName":"Rate Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Rate SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                },
                {
                   "apiName":"Ship",
                   "shipSubApis":[
                      {
                         "apiName":"Ship Express",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Freight",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship Ground",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      },
                      {
                         "apiName":"Ship SmartPost",
                         "status":"Operational",
                         "upTime":"98%",
                         "avgResponseTime":"160ms"
                      }
                   ]
                }
             ]
          },
        
       ],
       "userRegion":"Indian Sub-Continent",
       "Country":"India"
    }
 }]
}
}

输出：

预期输出：根据数组中的对象两张卡

标签： angular

Answer 1

您应该有列表的第二个循环。

<div class="card" *ngFor="let regionList of regionLists; let i = index" [attr.data-index]="i">
  <div class="card-body">
   <ng-container *ngFor="let listItem of regionList.output.list">
      {{ listItem.region }}
   </ng-container>
  </div>
</div>