Использование * ngFor для отображения строковых значений из массива

Question

У меня есть массив, который создается путем разбиения строки с использованием str.split(), и это создает массив, который выглядит следующим образом:

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

Я хочу иметь возможность отображать эту информацию в таблицеиспользуя *ngFor.

Я пробовал это (из этот вопрос ):

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

Но я получаю эту ошибку:

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

Таблица должна выглядетькак это:

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

Как мне достичь этой таблицы?

Answer 1

Чтобы сделать массив из строки с , разделителями, используйте String.prototype.split метод

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

Ng-run Пример

Answer 2

Вам понадобится два *ngFor с.Один для циклического просмотра каждого элемента в array и один для итерации по каждому элементу в массиве, который вы создадите, split связывая строку с ,

Дайте этому попытку:

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

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.