[英]How to create a table 100 x 100 by ngFor (angular 5) in HTML?
How to create table with size 100 x 100 where cell has 5px x 5 px , normal table without Angular Materials ? 如何创建尺寸为100 x 100的表格,其中单元格为5px x 5 px,没有角材料的普通表格? All cells must be clicked by (click) 所有单元格都必须单击(单击)
Edit: How i can nagvigate to position, np. 编辑:如何导航到np。 X x Y in this table ? 此表中的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 );
}
In your controller (basically creates an array with 100 numbers): 在您的控制器中(基本上创建一个包含100个数字的数组):
$scope.numbers = Array.apply(null, {length: 100}).map(Number.call, Number);
In the HTML-template: 在HTML模板中:
<table>
<tr ng-repeat="i in numbers">
<td ng-repeat="j in numbers">{{ i + 'x' + j }}</td>
</tr>
</table>
To style the cells you can use any CSS-method you prefer. 要设置单元格的样式,可以使用您喜欢的任何CSS方法。 Either define a global rule: 定义一个全局规则:
td { width: 5px; height: 5px; }
or embed it right into <td>
-tag: <td style="width:5px; height:5px"...>
或将其直接嵌入<td>
-tag: <td style="width:5px; height:5px"...>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.