CODEWITHSUNDEEP
javascriptangular
user3531149
user3531149

Reputation: 1539

For Loop in angular 2 throws Exception

I have set up a bootstrap by following the quickstart.

index.html

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular 2 Quickstart</title>
        <!-- Angular is working on removing the traceur dependency -->
        <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
        <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
        <script src="app.js"></script>
        <script src="components/display.js"></script>
    </head>

    <body>
        <my-app></my-app>
        <display></display>
    </body>
</html>

display.js

function DisplayComponent() {
    this.myName = "Jim";
    this.trophies = 'laugh';
    this.dogs = ['this','is','it'];
}

DisplayComponent.annotations = [
    new ng.ComponentMetadata({
        selector: "display"
    }),
    new ng.ViewMetadata({
        template:
            '<input [(ng-model)]="myName" type="text">' +
            '<h2>{{ trophies }}</h2>' +
            '<p>name: {{ myName }}</p>' +
            '' +
            '<ul>' +
            '   <li *ng-for="#dog of dogs">' +
            '       {{ dog }}' +
            '   </li>' +
            '</ul>',
        directives : [ng.FORM_DIRECTIVES]
    })
];

document.addEventListener('DOMContentLoaded', function() {
    ng.bootstrap(DisplayComponent);
});

For some reason if I remove the for loop it works again and displays the first variables normally, so I guess its a syntax error, but it seems to match the documentation

Upvotes: 0

Views: 346

Answers (1)

Julien Alary
Julien Alary

Reputation: 780

NB : I can't comment sorry for this full post.

Which version of angular are you using ? Because the following stuff is working for me:

<head lang="en">
    <meta charset="UTF-8">
    <title>Angular 2 Quickstart</title>
    <!-- Angular is working on removing the traceur dependency -->
    <script src="https://code.angularjs.org/2.0.0-alpha.47/angular2.sfx.dev.js"></script>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
    <script src="display.js"></script>
</head>

<body>
    <display></display>
</body>

Upvotes: 2

Related Questions