Angular js 到 Angular 8答案

【问题标题】：Angular js to angular 8Angular js 到 Angular 8
【发布时间】：2020-07-31 18:28:51
【问题描述】：

我正在编写一个 Angular 应用程序，我有一个旧代码我想将此 Angular js 代码转换为 Angular

table.html

<table ng-repeat="group in vm.groups" style="float: left">
      <thead>
        <tr>
          <th><b>Sl. No</b></th>
          <th><b>Generated Code</b></th>
        </tr>
      </thead>
      <tr ng-repeat="g in group.values">
        <td ng-style="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{$parent.$index * 10 + $index +  1}}</td>
        <td ng-style="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{g.value}}</td>
      </tr>

    </table>

table.ts

 app.controller('Ctrl', function() {
      var vm = this;

      var items = [{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'}];
      vm.groups = [];
      var i,j,temparray,chunk = 10;
      for (i=0,j=items.length; i<j; i+=chunk) {
        temparray = items.slice(i,i+chunk);
        vm.groups.push({values: temparray});
      }
    });

我想将此代码转换为 Angular2+。我是 Angular 新手，请帮助我。

【问题讨论】：

plnkr.co/edit/ZQ1NpOa96IpzSncbFSud?p=preview&preview这是来源
请帮助将此代码转换为 Angular 2+
你尝试做什么？
欢迎来到 SO！你都尝试了些什么？目前，您的问题类似于“这是我的代码，我想用它来做 - 为我做”。您需要展示您已经尝试过的内容以及遇到的任何具体问题，否则您的问题可能会被标记为过于模糊。

标签： javascript angularjs angular typescript

【解决方案1】：

Angular 2 以后你应该使用*ngFor 指令来循环数组。

所以，您的component.html 应该如下所示：

<table *ngFor="let group of groups; let i=index">
    <thead>
        <tr>
            <th><b>Sl. No</b></th>
            <th><b>Generated Code</b></th>
        </tr>
    </thead>
    <tr *ngFor="let g of group.values; let x=index" [ngClass]="(x%2===0)?'even':'odd'">
        <td>{{i * 10 + x +  1}}</td>
        <td>{{g.value}}</td>
    </tr>

</table>

以下是您的代码的 Angular 8 转换：demo

【讨论】：