Angular 2 Как объединить индекс в объект и его массив, используя Ng For - PullRequest
Новая
       12

Angular 2 Как объединить индекс в объект и его массив, используя Ng For

0 голосов
/ 28 июня 2018

Я динамически создал массив, используя строки и столбцы 

[
  {
    "name": "table 1",
    "rows": [
      "row 1",
      "row 2",
      "row 3",
      "row 4",
      "row 5"
    ],
    "columns": [
      "column 1",
      "column 2"
    ],
      "col1": [
      {
        "1": "row1col1"
      },
      {
        "2": "row2col1"
      },
      {
        "3": "row3col1"
      },
      {
        "4": "row4col1"
      },
      {
        "5": "row5col1"
      }
    ],
      "col2": [
      {
        "1": "row1col2"
      },
      {
        "2": "row2col2"
      },
      {
        "3": "row3col2"
      },
      {
        "4": "row4col2"
      },
      {
        "5": "row5col2"
      }
    ]
  },
  {
    "name": "table 2",
    "rows": [
      "row 1",
      "row 2",
    ],
    "columns": [
      "column 1",
      "column 2",
      "column 3"
    ],
      "col1": [
      {
        "1": "row1col1"
      },
      {
        "2": "row2col1"
    ],
      "col2": [
      {
        "1": "row1col2"
      },
      {
        "2": "row2col2"
    ],
      "col3": [
      {
        "1": "row1col3"
      },
      {
        "2": "row2col3"
    ]
  }
 ]

Затем, используя этот динамический массив, я создал таблицу и сохранил ее как finalArray. что было хорошо, пока я не пошел к телу моей таблицы, чтобы показать данные для столбца и строки 

<div *ngFor="let table of finalArray">
     <span>{{table.name}}</span>

      <table class="table">
          <thead class="thead-dark">
             <tr>
               <th scope="col"></th>
               <th *ngFor="let column of table.columns" scope="col">{{column}}</th>
             </tr>
          </thead>
     <tbody>
       <tr *ngFor="let row of table.rows ; let i = index">
         <td>{{row}}</td> // this works fine
         <td *ngFor="let column of table.columns; let x = index"> {{table.['col' + x].[i+1]}}</td> 
      // this is the problem
      </tr>

     </tbody>
  </table>
</div>

Обратите внимание, что массив был создан динамически, поэтому строки и столбцы не фиксированы, а столбцы col1 и col2 созданы на основе столбцов.

Я пытаюсь что-то вроде table.col [index]. [Loop all values]?

1 Ответ

0 голосов
/ 28 июня 2018

Вы почти у цели. Итерация по столбцам во втором цикле для большей точности. Удалить '. При получении элементов. Поменяйте местами +1 с i на x при получении столбцов и используйте Object.keys, чтобы получить массив имен ключей, чтобы вы могли получить содержимое соответствующего столбца. Я положил это в методе для удобства чтения

HTML 

<table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col"></th>
                <th *ngFor="let column of table.columns" scope="col">{{column}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of table.rows ; let i = index">
                <td>{{row}}</td>
                <td *ngFor="let col of table.columns; let x = index">
                    {{getColumnContent(table['col'+(x+1)][i])}}
                </td>
            </tr>

        </tbody>
</table>

Машинопись 

  getColumnContent(col) {
    return col[Object.keys(col)[0]] // always [0] as it contains a single element
  }

Демо

...