Menu
I've recently switched to Angular 4 from Angular 1 and lots of things seem to be new to me now. One of them seems to relate to data-binding. In the old version, I would declare an array as $scope.arrname in the JS controller and I could navigate over it in the HTML view using ng-repeat.
Now, when I am trying to achieve the same outcome, it only works partially. What am I doing wrong?
Example: In a component, I declared a test array testarr : any[] = [1,2,3];
{{testarr}}
> Prints 1,2,3 on the scrreen
<ol>
<li ng-repeat="item in testarr">{{item}}ITEM Found!</li>
</ol>
>only iterates 1 time (ignoring the 2,3) in the array.Why does my code not iterate over the array as it was the case previously ? What am I missing here?
220
The *ngFor directive in Angular is similar to the ng-repeat directive in AngularJS. It repeats the associated DOM element for each item in the specified collection.
Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
You should use ngFor instead of ng-repeat
<ol>
<li *ngFor="let item of testarr">{{item}}ITEM Found!</li>
</ol>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
