如何在 HTML 中通过 ngFor (angular 5) 创建一个 table 100 x 100？

Question

如何创建大小为 100 x 100 的 table，其中单元格有 5px x 5 px，正常 table 没有 Angular 材料？所有单元格都必须点击 (click)

编辑：我如何导航到位置，np. X x Y 在此 table ?

Answer 1

    @View({
  template: `
    <table>
      <tr *ngFor="let number of numbers">
        <td *ngFor="let number of numbers">{{number}}</td>
      </tr> 

    </table>
  `
})
export class SampleComponent {
  numbers: any;
  this.numbers = Array.from(Array(100)).map((x, i) => i );
}

Answer 2

在您的控制器中（基本上创建一个包含 100 个数字的数组）：

$scope.numbers = Array.apply(null, {length: 100}).map(Number.call, Number);

在 HTML-模板中：

<table>
  <tr ng-repeat="i in numbers">
    <td ng-repeat="j in numbers">{{ i + 'x' + j }}</td>
  </tr>
</table>

要设置单元格样式，您可以使用任何您喜欢的 CSS 方法。要么定义一个全局规则：

td { width: 5px; height: 5px; }

或直接将其嵌入 <td>-标签：<td style="width:5px; height:5px"...>

如何在 HTML 中通过 ngFor (angular 5) 创建一个 table 100 x 100？

How to create a table 100 x 100 by ngFor (angular 5) in HTML?

html

angular5