将数据从JSON文件导入到Angular 6中具有折叠行的表中

Question

我开始学习6号角，而我确实处于起步阶段。 我需要创建这种表：

它应该显示与不同国家/地区的网站AD相关的计算机的信息。

数据文件为JSON，如下所示：

 {"countryList":[{"Country":null,"Area":null,"AD_Site_Name":null,"Netbios_Name":null,"UserName":"ABILITY\\gaynullin_mf","ARPProductName":"WinRAR 5.31 (64-разрядная)","FilePath":"C:\\Program Files\\WinRAR\\","InstalledSource":"Other","LastHWScan":"2018-05-26T12:56:41","LastScanDate":"2018-05-26T02:57:25"},
 {"Country":null,"Area":null,"AD_Site_Name":null,"Netbios_Name":null,"UserName":"ABILITY\\ufa_it","ARPProductName":"WinRAR 4.01 (64-разрядная)","FilePath":"C:\\Program Files\\WinRAR\\","InstalledSource":"Other","LastHWScan":"2018-05-24T15:02:41","LastScanDate":"2018-05-24T19:28:05"}]}

我已经将数据从JSON文件导入到一个简单的表中，但是我需要创建折叠行。因此，首先应该有国家列表，然后用户应该单击它，然后是区域列表，然后单击区域，然后是网站列表，然后用户选择网站，然后会看到有关计算机的信息。

目前，我的代码如下：

文件app.component.html：

     <table>
  <thead>
    <tr>
        <th>Country</th>
        <th>Area</th>
        <th>AD_Site_Name</th>
        <th>Netbios_Name</th>
        <th>UserName</th>
        <th>ARPProductName</th>
        <th>FilePath</th>
        <th>InstalledSource</th>
        <th>LastHWScan</th>
        <th>LastScanDate</th>
    </tr>
  </thead>

  <tbody *ngFor="let country of country">
    <tr>
      <td>{{ country.Country }}</td>
      <td>{{ country.Area }}</td>
      <td>{{ country.AD_Site_Name }}</td>
      <td>{{ country.Netbios_Name }}</td>
      <td>{{ country.UserName }}</td>
      <td>{{ country.ARPProductName }}</td>
      <td>{{ country.FilePath }}</td>
      <td>{{ country.InstalledSource }}</td>
      <td>{{ country.LastHWScan }}</td>
      <td>{{ country.LastScanDate }}</td>
    </tr>
  </tbody>
</table>

文件app.component.ts：

    import { Component, OnInit } from '@angular/core';
import { HttpService} from './http.service';
import { Country } from './country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [HttpService]
})

export class AppComponent implements OnInit { 

  country: Country[]=[];
  area: Country[]=[];

  constructor(private httpService: HttpService){}

  ngOnInit(){

      this.httpService.getData().subscribe(data => this.country=data["countryList"]);
  }

}

文件http.service.ts：

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class HttpService{

    constructor(private http: HttpClient){ }

    getData(){
        return this.http.get('/assets/data.json')
    }
}

文件country.ts：

export class Country{
    Country: string;
    Area: string;
    AD_Site_Name: string;
    Netbios_Name: string;
    UserName: string;
    ARPProductName: string;
    FilePath: string;
    InstalledSource: string;
    LastHWScan: string;
    LastScanDate: string;
}

如何创建这些折叠行？