Angularjs2显示json像树

Posted 2021-04-25

我创建了一个类似的json文件

{“tests”：{“CHE”：{“Failover”：[“Standalone Box Restart”]，“Smoke”：[“所有域名都已发布”，“无FID复制”，“PE和RIC Mangling”，“Real”时间更新 - FTN“，”每个组成部分只有一个响应消息“，”LIVE-STANDBY-LIVE Switch“]，”查询“：{”查询“：[”获取区域服务“]}}}

如何像树一样在html上显示真的快点。谢谢你喜欢：enter image description here

答案

你可以这样试试。

首先，您需要使用ng generate pipe testPipe创建管道（这也将导入app.module.ts文件中的依赖项），以将对象转换为数组以循环遍历元素。

测试pipe.pipe.ts

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

@Pipe({
  name: 'keys'
})
export class TestPipePipe implements PipeTransform {

 transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }

}

在您的模板文件中放置下面提到的代码。

<div *ngFor="let item of data | keys">
    <ul>
      <li>
        {{item.key}}
         <ul *ngFor="let inItem of item.value | keys">
           <li>
            <input type="checkbox" name="">{{inItem.key}}
             <ul *ngFor="let ininItem of inItem.value | keys">
               <li>
                 <input type="checkbox" name="">{{ininItem.key}}
                 <ul *ngFor="let inininItem of ininItem.value | keys">
                   <li>
                     <input type="checkbox" name="">{{inininItem.value}}
                   </li>
                 </ul>
               </li>
             </ul>
           </li>
         </ul>
      </li>
    </ul>
  </div>

在您的组件文件中，您可以这样。

data = { "tests": { "CHE": { "Failover": [ "Standalone Box Restart" ], "Smoke": [ "All Domains Are Published", "No FID Duplication", "PE and RIC Mangling", "Real Time Updates - FTN", "Only One Response Message Per Constituent", "LIVE-STANDBY-LIVE Switch" ] }, "Queries": { "Queries": [ "Get Services For Region" ] } } }