Как вывести массив в массиве через ngfor в angular в таблицу?

Пользователь

от richard , в категории: JavaScript , 2 месяца назад

Как вывести массив в массиве через ngfor в angular в таблицу?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от karen.wisozk , месяц назад

@richard 

Для вывода массива в массиве через ngFor в Angular в таблицу следуйте следующим указаниям:

  1. В компоненте создайте двумерный массив и заполните его данными:
1
2
3
4
5
6
7
export class YourComponent {
   data: any[][] = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
   ];
}


  1. В шаблоне компонента используйте вложенный ngFor для вывода данных в таблицу:
1
2
3
4
5
6
7
<table>
   <tbody>
      <tr *ngFor="let row of data">
         <td *ngFor="let item of row">{{ item }}</td>
      </tr>
   </tbody>
</table>


Здесь первый ngFor используется для перебора строк двумерного массива, а второй ngFor используется для перебора элементов в каждой строке и вывода их в отдельную ячейку таблицы.


Примечание: Вам может потребоваться дополнительная настройка таблицы для стилей или других требований, но эти основные шаги помогут вам начать вывод массива в массиве через ngFor в таблицу в Angular.