Angular js до angular 8

Question

Я пишу приложение Angular и у меня есть старый код, и я хочу преобразовать этот код angular js в angular

таблицу. 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});
      }
    });

i Хотите преобразовать этот код в Angular2 +. Я новичок в angular, пожалуйста, помогите мне.

Answer 1

Angular 2 и далее вы должны использовать директиву *ngFor для l oop над массивом.

так, ваш 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