如何使用 ngFor 和 table [Angular] 显示矩阵等数组元素答案

【问题标题】：How to display array elements like a matrix using ngFor and table [Angular]如何使用 ngFor 和 table [Angular] 显示矩阵等数组元素
【发布时间】：2020-03-23 16:44:33
【问题描述】：

我正在 Angular 中创建月份选择器。我也关注了this、this 和this，但无法实现我想要的。我从一月到十二月有几个月的时间。我想像 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。我的代码不起作用。请纠正我。

【问题讨论】：

标签： html css ngfor

【解决方案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>

【讨论】：

这正是我一直在寻找的。谢谢

【解决方案2】：

你需要像下面这样使用 css 样式。

.my-table {
  display: flex;
  flex-direction: row;
}

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

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

【讨论】：