Angular 6中嵌套JSON对象的最佳展示方式

我刚帮同事处理过类似的AngularJS到Angular 6的迁移，正好可以给你梳理下适配的最佳实现方式，分组件类（TypeScript）和模板（HTML）两部分来拆解：

1. 组件类的逻辑适配 #

首先把原来AngularJS里的vm变量和方法转换成Angular组件的属性与方法。原来的展开/收起逻辑可以直接迁移，只是语法换成TypeScript：

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

// 可选但推荐：定义接口让类型更安全
interface Details {
  id: string;
  'Field Name': string;
  'Geometry Type': string;
}

interface Item {
  showDetails: boolean;
  details: Details;
  numberOfWords: number;
}

@Component({
  selector: 'app-details-view',
  templateUrl: './details-view.component.html',
  styleUrls: ['./details-view.component.css']
})
export class DetailsViewComponent {
  // 模拟你的数据，实际可从服务或输入属性获取
  item: Item = {
    showDetails: false,
    details: { 
      "id": "36d610ed0c62bafd", 
      "Field Name": "FID,Shape,OID_,BankPositi", 
      "Geometry Type": "Point" 
    },
    numberOfWords: 0
  };

  // 对应原来的vm.showDetails方法，控制展开收起
  toggleDetails(entry: Item) {
    entry.showDetails = !entry.showDetails;
    // 替换成你的配置逻辑，比如：
    // entry.numberOfWords = entry.showDetails ? yourConfig.showAll : yourConfig.numberOfWordsShown;
  }
}

2. 模板的迭代展示实现 #

Angular 6内置了KeyValuePipe，专门用来迭代对象的键值对，完美替代AngularJS里的(key, val)迭代方式。同时用*ngIf替代原来的ng-show来控制显示隐藏：

<!-- 触发展开/收起的按钮，和原交互逻辑一致 -->
<button (click)="toggleDetails(item)">
  {{ item.showDetails ? '收起详情' : '查看详情' }}
</button>

<!-- 迭代展示嵌套的details对象 -->
<div *ngIf="item.showDetails">
  <div *ngFor="let pair of item.details | keyvalue">
    <p>
      <span>{{ pair.key }}:</span> {{ pair.value }}
    </p>
  </div>
</div>

额外优化点 #

• 保持对象属性原顺序：默认KeyValuePipe会按键的字母排序，如果想保留JSON里的原始属性顺序，可以自定义排序函数：
  模板修改：

  <div *ngFor="let pair of item.details | keyvalue: keepOriginalOrder">
  

  组件类添加函数：

  keepOriginalOrder(): number {
    return 0; // 返回0表示不改变原有顺序
  }
  

• 类型安全：上面定义的Details和Item接口能帮你在开发时避免类型错误，IDE也会给出代码提示，迁移后期推荐补上。

与原AngularJS实现的对应关系 #

这样实现后，功能和原来完全一致，同时符合Angular的组件化最佳实践。

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