How could I use ngFor to design this (maybe nested) table

Question

I have an Object Array that has a key and then has an array for it's value. Something like this:

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

I previously had this working using an object like this

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

but I would like to change the functionality some so I switched to the value being an array instead.

I want to create a table that looks something like this

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

It can be a nested table or it can just show the two messages in the table cell. I am not too picky.

I tried nesting the table, but that did not work. I am not sure how I can use a second ngFor to do something like this.

This is my html that works with the Object Array that does not have an array for its value

<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>

I tried changing the item.value line with another table and another ngFor, but nothing printed.

any ideas would be appreciated

c__money · Answer 1 · 2019-07-10T16:01:27.460

2

You're very close; you should just need another *ngFor directive inside your second tag, like this...

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

So your final table looks like...

<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>

edited Jul 10 '19 at 16:01

answered Jul 10 '19 at 15:55

c__money

76
2

Or, you could go with `
val
` to show the messages on separate lines within one table cell, which seems to be the goal. – workerjoe Jul 10 '19 at 15:58
1

Agree with @workerjoe Probably better to have nested divs inside of the td rather than a bunch of tds. It's bad form to have more tds than there are columns. – Rich Jul 10 '19 at 15:58
@c__money when I tried this I get error that read "ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." – new_programmer_22 Jul 10 '19 at 15:59
@newwebdev22 do you have non-array values? This will only work if all of your item.values are iterable objects (aka, an array). – Rich Jul 10 '19 at 16:01
1

Agree with @workerjoe, I updated the answer to achieve the desired result – c__money Jul 10 '19 at 16:02
Noticed a typo, probably why @newwebdev22 was having issues. You want `{{val}}` instead of `{{item.value}}`. – Rich Jul 10 '19 at 16:06
hmm for some reason closing tag errors but dont see any extra tags here? – new_programmer_22 Jul 10 '19 at 16:18

nash11 · Accepted Answer · 2019-07-12T07:04:17.570

You do not need to use the keyvalue pipe. The keyvalue pipe is used to transform an object into an array of key value pairs so using this will give you incorrect values in your table. On the other hand, you have a normal array of objects with one property that contains an array. This format is perfect for a nested ngFor.

Change your table to the code below

<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>

In your css add a vertical-align to keep the data in the cell on top.

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

Here is a working example on stackblitz

Edit: As requested in the comments, to add html content, use innerHTML on the div like below

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

Inside my message I want to incorporate some innerHTML stuff. Is there anyway I could incorporate this for the {{ value }} section? @nash11 — new_programmer_22, Jul 11 '19 at 15:11

How could I use ngFor to design this (maybe nested) table

2 Answers2