Search code examples
angularangularjs-ng-repeat

Angular ng-repeat doesn't work, but I'm able to display array elements individually


PROBLEM: I'm not able to see any of the string array elements I'm trying to print using ng-repeat.

COMPONENT:

import { 
  Component 
} from '@angular/core'; 

@Component ({ 
  selector: 'my-app', 
  templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
  TutorialName: string = 'Angular JS2'; 
  appList: string[] = ["Binding", "Display", "Services"];
  currentTime = new Date(); 
}

TEMPLATE:

  <div> 
     The first item is {{appList[0] }}<br> 
     The first item is {{appList[0] | lowercase}} (lowercase)<br> 
     The first item is {{appList[0] | uppercase}} (uppercase)<br> 
     The second item is {{appList[1] }}<br> 
     The items are:
     <ol>
        <li ng-repeat="a in appList">{{a}}</li>
     </ol>
     The date/time is: {{currentTime}}<br> 
     The date/time is: {{currentTime | date:'MM/dd/yyyy'}} (date:'MM/dd/yyyy')<br> 
</div>

Everything displays find except {{a}}.

Q: What is the correct way to access string array "appData" so the items print correctly with "ng-repeat"?

ANGULAR VERSION:

Angular CLI: 7.0.5
Node: 11.1.0
OS: linux x64
Angular:
...
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.5
@angular-devkit/core         7.0.5
@angular-devkit/schematics   7.0.5
@schematics/angular          7.0.5
@schematics/update           0.10.5
rxjs                         6.3.3
typescript                   3.1.6

Solution

  • Angular no longer uses ng-repeat, that was updated when Angular moved from AngularJS to just Angular Angular 1.X --> Angular 2+

    use *ngFor instead used the same way like so...

     <ol>
        <li *ngFor="let a of appList">{{a}}</li>
     </ol>
    

    you can read about the change from ng-repeat to *ngFor here