Я хочу отобразить в таблице массив с вложенным массивом

Question

Это моя база данных;

[{
  "firstName": "Shaun",
  "salary": [
    {
    "id":1,
    "rate": 250,
    },
    {
    "id":2,
     "rate": 290,
    }
  ]
},{
  "firstName": "Julian",
  "salary": [
    {
    "id":1,
     "rate": 750,      
    },
    {
    "id":2,
     "rate": 760,      
    },
    {
    "id":3,
     "rate": 790,      
    },
  ]
}
}]

HTML Я пытался: -

<table class="table" >
   <thead class="thead-light" >
      <tr *ngFor='let nameInfo of cleanReport; let i = index'>
         <th scope="col">{{nameInfo.firstName}}</th>
         <th scope="col"></th>
      </tr>
   </thead>
   <tbody >
      <tr *ngFor='let info of nameInfo[i].salary'>
         <td>{{info.id}}</td>
         <td>{{info.rate}}</td>
      </tr>
   </tbody>
</table>

Мой желаемый результат - это таблица, которая отображает имя с соответствующими вхождениями зарплаты, которая находится во вложенном массиве. Таблица будет выглядеть примерно так: введите описание изображения здесь

Answer 1

Попробуйте это в своем классе контроллеров:

 data: any;
ngOnInit() {
this.httpClient.get('assets/data.json').subscribe(data => {
  console.log(data);
  this.data = data;  
});  

и это в html:

<table class="table table-bordered">
      <tbody *ngFor="let emp of data">
    <tr><td colspan="2" style="background-color: black;color: white;"> 
         {{emp.firstName}}</td></tr>
        <tr>
          <td>id</td>
          <td>rate</td>
        </tr>
        <tr  *ngFor="let sal of emp.salary">
        <td> {{sal.id}}</td>
        <td> {{sal.rate}}</td>
        </tr>
       </tbody>
 </table>

Answer 2

Используйте вложенные *ngFor, например: -

 <table class="table" >
       <thead class="thead-light" >
          <tr *ngFor='let nameInfo of cleanReport; let i = index'>
             <th scope="col">{{nameInfo.firstName}}</th>
             <th scope="col"></th>
          </tr>
       </thead>
       <tbody >
          <ng-container *ngFor='let cr of cleanReport;'>
            <tr *ngFor='let salary of cr.salary;'>
              <td>{{salary.id}}</td>
              <td>{{salary.rate}}</td>
            </tr>
          </ng-container>
       </tbody>
    </table>

Answer 3

Решение, которое вы ищете, находится в официальном руководстве Angular. В этом уроке телефоны загружаются из файла JSON с использованием службы Angulars $ http. В приведенном ниже коде мы используем $ http.get для загрузки телефонов. json Файл, сохраненный в каталоге телефонов:

var phonecatApp = angular.module('phonecatApp', []);   
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
 $http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
}); 
$scope.orderProp = 'age';
});

Затем мы выполняем итерации по телефонам:

<table>
  <tbody ng-repeat="i in phones">
    <tr><td>{{i.name}}</td><td>{{$index}}</td></tr>
    <tr ng-repeat="e in i.details">
       <td>{{$index}}</td>
       <td>{{e.foo}}</td>
       <td>{{e.bar}}</td></tr>
  </tbody>
</table>