如何在Angular 5中遍历SampleJSON的type1节点并获取对应值

嘿，我来帮你搞定这个问题！你给出的SampleJSON里，type1是一个以数字字符串为键的对象集合，不是标准数组，所以在Angular 5里遍历它需要稍微处理一下，我给你两种实用的方案：

方案一：在组件内转换为数组后遍历 #

这种方法最直接，先把type1对象转换成数组，再在模板里用*ngFor遍历：

组件类代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements OnInit {
  // 模拟你的SampleJSON数据
  sampleJson = {
    type1: {
      "0": {"title":"Title1","url":"URL1"},
      "1": {"title":"Title2","url":"URL2"},
      "2": {"title":"Title3","url":"URL3"},
      "3": {"title":"Title4","url":"URL4"}
    }
  };
  type1Items: any[];

  ngOnInit() {
    // 使用Object.values()提取对象的所有值，转换成数组
    this.type1Items = Object.values(this.sampleJson.type1);
    
    // 如果需要保留原对象的键（比如那个"0"、"1"），可以用Object.entries()：
    // this.type1Items = Object.entries(this.sampleJson.type1).map(([key, value]) => ({ index: key, ...value }));
  }
}

模板代码 #

<!-- 如果数据是异步加载的，记得加*ngIf避免空指针 -->
<div *ngIf="type1Items">
  <div *ngFor="let item of type1Items">
    <h4>{{ item.title }}</h4>
    <a [href]="item.url" target="_blank">{{ item.url }}</a>
    <!-- 如果用了保留键的写法，还可以显示index：{{ item.index }} -->
  </div>
</div>

方案二：自定义管道遍历对象（无需提前转换） #

如果不想在组件里处理数据，你可以写一个简单的自定义管道，把对象转换成可遍历的键值对数组，这样模板里直接用管道处理就行：

1. 创建自定义管道 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'objectToArray' })
export class ObjectToArrayPipe implements PipeTransform {
  transform(obj: any): any[] {
    // 先判断对象是否存在，避免报错
    return obj ? Object.keys(obj).map(key => ({ key, value: obj[key] })) : [];
  }
}

2. 在模块中声明管道 #

打开你的模块文件（比如AppModule），把这个管道加入declarations数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ObjectToArrayPipe } from './object-to-array.pipe';
import { YourComponentComponent } from './your-component/your-component.component';

@NgModule({
  declarations: [
    YourComponentComponent,
    ObjectToArrayPipe // 声明自定义管道
  ],
  imports: [BrowserModule],
  bootstrap: [YourComponentComponent]
})
export class AppModule { }

3. 模板中使用管道 #

<div *ngIf="sampleJson">
  <div *ngFor="let entry of sampleJson.type1 | objectToArray">
    <p>索引：{{ entry.key }}</p>
    <h4>{{ entry.value.title }}</h4>
    <a [href]="entry.value.url" target="_blank">{{ entry.value.url }}</a>
  </div>
</div>

小提示 #

如果你的sampleJson是通过HTTP请求异步获取的，一定要记得用*ngIf先判断数据是否加载完成，不然会出现Cannot read property 'type1' of undefined的错误哦！

内容的提问来源于stack exchange，提问作者SDLBeginner