*ngFor -循环迭代没有发生。对象的一个元素正在显示，而不是全部(以角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"
    }
 }]
}
}

输出：

​

​

预期输出:数组中的每个对象有两张卡片

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>

Answer 2

您有二维数组，但使用了一个ngFor，因此需要嵌套ngFor，如下所示：

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

Answer 3

对于我来说，这是有用的答案。谢谢

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