在Angular 6中使用ngFor循环嵌套的JSON对象,可以通过嵌套的ngFor指令来实现。下面是一个示例:
首先,假设我们有一个嵌套的JSON对象如下:
{
"countries": [
{
"name": "China",
"cities": [
{ "name": "Beijing" },
{ "name": "Shanghai" },
{ "name": "Guangzhou" }
]
},
{
"name": "USA",
"cities": [
{ "name": "New York" },
{ "name": "Los Angeles" },
{ "name": "Chicago" }
]
}
]
}
在组件中,我们可以将这个JSON对象赋值给一个变量,比如countries,然后在模板中使用ngFor来循环嵌套的JSON对象,如下所示:
<div *ngFor="let country of countries">
<h1>{{ country.name }}</h1>
<ul>
<li *ngFor="let city of country.cities">{{ city.name }}</li>
</ul>
</div>
在这个例子中,外层的ngFor指令用于循环countries数组,内层的ngFor指令用于循环country对象中的cities数组。通过这样的嵌套使用,我们可以逐层访问和显示JSON对象中的数据。
关于Angular 6的更多详细用法和相关指令,你可以参考腾讯云提供的Angular产品:腾讯云-Serverless Framework
领取专属 10元无门槛券
手把手带您无忧上云