Using *ngFor to display string values from array

Question

I have an array which is created from splitting a string using str.split() and this creates an array and it looks like this:

var array = [
  "TEXT1,1234,4321,9876",
  "TEXT2,2345,5432",
  "TEXT3,6543,3456"
]

I want to be able to display this information in a table using *ngFor.

I have tried this (from this question):

<tr>
    <td *ngFor="let info of array">{{info.join(",")}}</td>
</tr>

But I get this error:

ERROR TypeError: _v.context.$implicit.join is not a function
    at Object.eval [as updateRenderer]

The table should look like this:

TITLE | VALUE1 | VALUE2 | VALUE3
--------------------------------
TEXT1 | 1234   | 4321   | 9876
--------------------------------
TEXT2 | 2345   | 5432   |
--------------------------------
TEXT3 | 6543   | 3456   |

How do I achieve this table?

Answer 1

To make array from string with , delimiters use String.prototype.split method

<tr *ngFor="let row of array">
  <td *ngFor="let info of row.split(',')">{{info}}</td>
</tr>

Ng-run Example

Answer 2

You will need two *ngFors. One to loop through each item in the array and one to iterate through each item in the array that you'll create by splitting the string with ,

Give this a try:

<table border="1">
  <thead>
    <tr>
      <td>TITLE</td>
      <td>VALUE 1</td>
      <td>VALUE 2</td>
      <td>VALUE 3</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of array">
      <td *ngFor="let column of row.split(',')">
        {{ column }}
      </td>
    </tr>
  </tbody>
</table>

---

Here's a Working Sample StackBlitz for your ref.