angular - как отобразить массив в виде нескольких строк в ячейке таблицы

Question

Извините, я новичок в angular и пытаюсь изучить некоторые основы, пока сам создаю какое-то приложение.

У меня есть следующее, которое выводит массив в ячейку таблицы TEST1, TEST2, TEST3

Моя цель - сделать так, чтобы он отображался как

TEST1

TEST2

TEST3

getStatus (element.message) возвращает массив, который построенный

array.pu sh (match [0]) в a for l oop

    <ng-container matColumnDef="ticketStatus">
      <th mat-header-cell *matHeaderCellDef class="text-center w-6">
        Status
      </th>
      <td mat-cell *matCellDef="let element">{{ getStatus(element.message) }}</td>
    </ng-container>

Answer 1

Я заметил, что вы используете материал Angular. Что вы могли бы сделать, это заполнить свои ячейки с помощью foreach для displayColumns?

<table cdk-table [dataSource]="dataSource">

  <ng-container *ngFor="let col of displayedColumns" cdkColumnDef="{{ col }}">
     <th cdk-header-cell *cdkHeaderCellDef>{{ col }}</th>
     <td cdk-cell *cdkCellDef="let row; let i = index"> {{ getFieldValue(i, col) }}   </td>
   </ng-container> 

   <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
   <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>

Обратите внимание: пример представляет собой CDK-таблицу, но он почти аналогичен Angular таблице материалов, поскольку он получен из CdkTable.

Я создал Stackblitz. Может быть, вам удастся вдохновиться:

https://stackblitz.com/edit/angular-ivy-bes8zf