Question

我创建了一个像

这样的json文件

{＆＃34; tests＆＃34;：{＆＃34; CHE＆＃34;：{＆＃34; Failover＆＃34;：[＆＃34; Standalone Box Restart＆＃34; ] ＆＃34;吸烟＆＃34;：[＆＃34;所有域名都被发布＆＃34;，＆＃34;没有FID复制＆＃34;，＆＃34; PE和 RIC Mangling＆＃34;，＆＃34;实时更新 - FTN＆＃34;，＆＃34;只有一条响应消息每个成分＆＃34;，＆＃34; LIVE-STANDBY-LIVE Switch＆＃34; ]}，＆＃34;查询＆＃34;：{ ＆＃34;查询＆＃34;：[＆＃34;获取区域服务＆＃34; ]}}}

如何像树一样在HTML上显示真的快点。谢谢像那样： enter image description here

Answer 1

你可以这样试试。

首先，您需要使用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" ] } } }

Angularjs2显示json像树

1 个答案: