如何使用 ngFor 和 table [Angular] 像矩阵一样显示数组元素
How to display array elements like a matrix using ngFor and table [Angular]
我正在 Angular 中创建月份选择器。我也关注了 this, this and 但无法实现我想要的。我从 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:我不想用bootstraprow
和col
。我的代码不工作。请指正。
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>
您需要使用 css 样式,如下所示。
.my-table {
display: flex;
flex-direction: row;
}
.month-row {
display: flex;
flex-direction: column;
margin: 10px;
}
我正在 Angular 中创建月份选择器。我也关注了 this, this and
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:我不想用bootstraprow
和col
。我的代码不工作。请指正。
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>
您需要使用 css 样式,如下所示。
.my-table {
display: flex;
flex-direction: row;
}
.month-row {
display: flex;
flex-direction: column;
margin: 10px;
}