簡體   English   中英

如何在HTML中通過ngFor(角度5)創建表100 x 100?

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

如何創建尺寸為100 x 100的表格,其中單元格為5px x 5 px,沒有角材料的普通表格? 所有單元格都必須單擊(單擊)

編輯:如何導航到np。 此表中的X x Y?

    @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 );
}

在您的控制器中(基本上創建一個包含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> -tag: <td style="width:5px; height:5px"...>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM