Как я могу использовать ngFor для разработки этой (возможно, вложенной) таблицы - PullRequest
Новая
       28

Как я могу использовать ngFor для разработки этой (возможно, вложенной) таблицы

2 голосов
/ 10 июля 2019

У меня есть Object Array, у которого есть ключ, а затем массив для его значения. Как то так: 

[
{key: 'example@example.com', value: ['message1', 'message2']}
]

Раньше у меня это работало с использованием такого объекта, как этот 

[
{key: 'example@example.com', value: 'message'}
]

но я хотел бы изменить некоторые функции, поэтому вместо этого я переключился на значение массива.

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

|       User Email       |       Result        |
|  example@example.com   |       message1      |
|                        |       message2      |
|  example1@example.com  |       message1      |
|                        |       message2      |

Это может быть вложенная таблица или просто отображать два сообщения в ячейке таблицы. Я не слишком разборчив.

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

Это мой html, который работает с Object Array, у которого нет массива для его значения 

<div class="container" style="text-align:center">
  <br />
  <h1>Results</h1>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        align: center;
      }
    </style>
  </head>
  <body>
    <table style="width:50%" align="center">
      <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of userResults | keyvalue">
        <td>{{ item.key }}</td>
        <td>{{ item.value }}</td>
      </tr>

      <tr></tr>
    </table>
  </body>

Я попытался изменить строку item.value с другой таблицей и другой ngFor, но ничего не печаталось.

любые идеи будут оценены

Ответы [ 2 ]

2 голосов
/ 10 июля 2019

Ты очень близко; вам просто нужна другая директива * ngFor внутри вашего второго тега, например ... 

<td>
    <span *ngFor="let val of item.value" style="display:inline-block">
        {{ item.value }}
    <span>
</td>

Итак, ваш финальный стол выглядит так ... 

<div class="container" style="text-align:center">
  <br />
  <h1>Results</h1>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        align: center;
      }
    </style>
  </head>
  <body>
    <table style="width:50%" align="center">
      <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of userResults | keyvalue">
        <td>{{ item.key }}</td>
        <td>
            <span *ngFor="let val of item.value" style="display:inline-block">
                 {{ item.value }}
            <span>
        </td>
      </tr>
      <tr></tr>
    </table>
  </body>
1 голос
/ 10 июля 2019

Вам не нужно использовать keyvalue pipe.Канал ключевого значения используется для преобразования объекта в массив пар ключ-значение, поэтому использование этого даст вам неверные значения в вашей таблице.С другой стороны, у вас есть обычный массив объектов с одним свойством, которое содержит массив.Этот формат идеально подходит для вложенных ngFor.

Измените вашу таблицу на код ниже 

<table style="width:50%" align="center">
  <tr>
    <th *ngFor="let col of displayedColumns">
      {{ col }}
    </th>
  </tr>
  <tr *ngFor="let item of userResults">
    <td>{{ item.key }}</td>
    <td>
      <div *ngFor="let value of item.value">
       {{ value }}
      </div>
    </td>
  </tr>
  <tr>
</table>

В вашем CSS добавьте vertical-align, чтобы держать данные в ячейке сверху. 

table,
th,
td {
  border: 1px solid black;
  align: center;
  vertical-align: top;
}

Вот рабочий пример для stackblitz

Редактировать : Как требуется в комментариях, чтобы добавить html-контент, используйте innerHTML на div, как показано ниже 

<div *ngFor="let value of item.value" [innerHTML]="value">
</div>
...