如何使用 ngFor 和表 [Angular] 显示数组元素，如矩阵

Question

我正在Angular中创建一个月份选择器。我也遵循了这个，这个和这个，但无法实现我想要的。我从1月到12月有几个月的时间。我想像 4X3 矩阵一样显示它们。但是我垂直地将所有月份都放在一列中。或者可能是我不必要地使我的代码过于复杂。这是我的代码。

Monthpikcer.component.html

<div class="my-table-div">
<table class="my-table" *ngFor="let row of months">
<tr class="month-row" *ngFor="let col of row">
<td class="month-name">{{col}}</td>
</tr>
</table> 
</div>

monthpicker.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
...
})
export class MonthpickerComponent implements OnInit {
months = [
['Jan', 'Feb', 'Mar'],
['Apr', 'May', 'Jun'],
['Jul', 'Aug', 'Sep'],
['Oct', 'Nov', 'Dec']
];
constructor() { }
ngOnInit() {
}
}

PS：我不想使用引导row和col。我的代码不起作用。请纠正我。

Answer 1

you can use this
<table class="my-table">
<tr class="month-row" *ngFor="let row of months; index as i">       
<table class="my-table">
<tr class="month-row"  >
<td *ngFor="let col of row" class="month-name">{{col}}</td>
</tr>
</table>            
</tr>
</table>

输出为

<table>
<tr><td>Jan</td><td>Feb</td><td>Mar</td></tr>
<tr><td>Apr</td><td>may</td><td>Jun</td></tr>
<tr><td>Jul</td><td>Aug</td><td>Sep</td></tr>
<tr><td>Oct</td><td>Nov</td><td>Dec</td></tr>
<table>

Answer 2

您需要使用如下所示的 css 样式。

.my-table {
display: flex;
flex-direction: row;
}
.month-row {
display: flex;
flex-direction: column;
margin: 10px;
}

查看此演示 - https://stackblitz.com/edit/angular-59081856。