如何使用ngFor和表[Angular]显示矩阵之类的数组元素>

Question

我正在Angular中创建一个月选择器。我也跟随了this，this和this，但无法实现我想要的功能。我从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。我的代码无法正常工作。请纠正我。

我正在Angular中创建一个月选择器。我遵循了这个，这个和这个，但是却无法实现我想要的。我从1月到12月有几个月的时间。我想将它们显示为4X3矩阵。但是我得到了所有...

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>

Answer 2

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