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?

infocontain string - "TEXT1,1234,4321,9876" and is not an array. So, join will not work. — random
– random, Commented Jul 2, 2019 at 10:58

yurzui · Accepted Answer · 2019-07-02 10:58:49Z

6

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

answered Jul 2, 2019 at 10:58

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SiddAjmera · Accepted Answer · 2019-07-02 11:01:40Z

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.

Collectives™ on Stack Overflow

Using *ngFor to display string values from array

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related