首页 文章

如何使用Angular 6创建动态html表

提问于
浏览 次
-1

我有一个数组里面有100个项目 . 我想在我的html页面中将此数组渲染为html table 10x10（10 tr，每个tr有10 td） . 我该怎么做角度？

tableIndexTR = [];
  tableIndexTD = [];

  constructor(private data: TransferService) {}

  ngOnInit() {

    for (let _i = 1; _i <= 10; _i++) {
        this.tableIndexTR.push(_i);
    }

    for (let _j = 1; _j <= 10; _j++) {
        this.tableIndexTD.push(_j);
      }
  }


  <table style="width: 100%">
      <tr *ngFor="let item of tableIndexTR">
          <td *ngFor="let item of tableIndexTD">{{item}}</td>
      </tr>
   </table>
javascript html angular typescript

1 回答

  • 1
    this.tableIndex = [];

for (let _i = 0; _i < 10; _i++) {
    let tmp = [];

    for (let _j = 1; _j <= 10; _j++) {
        tmp.push(_i * 10 + _j);
      }

        this.tableIndex.push({
           subArray: tmp
        });
   }


   <div *ngFor=“let row of tableIndex”>
           <div *ngFor=“let col of row.subArray”>
                   {{col}}
           </div>
   </div>
    回复于

相关问题