Angular2 - Using ngFor inside a component doesn't print out the contents

Question

Im not exactly sure what I am doing wrong here, but if i change template to templateUrl and create the template in template/post.html it works as intended with *ngFor inside that template file.

(function (Search) {


    // Posts
    Search.SearchPosts = ng.core
        .Component({
            selector: 'posts',
            providers: [ng.http.HTTP_PROVIDERS],
            template:
                '<div *ngFor=#post of posts>'
                +   '<h1>{{post.title}}</h1>'
                +   '<p>{{post.body}}</p>'
                +'</div>'
        })
        .Class({
            constructor: [ng.http.Http, function(Http) {
                this.http = Http;
                this.posts = [];
                this.getPosts().subscribe(function(posts) {
                    this.posts = posts;
                }.bind(this));
            }],
            getPosts: function() {
                return this.http.get('http://jsonplaceholder.typicode.com/posts').map(function(response) {
                    return response.json();
                });
            }
        });

    // Core wrapper
    Search.SearchComponent = ng.core
        .Component({
            selector: 'search-page'
        })
        .View({
            template: '<posts></posts>',
            directives: [Search.SearchPosts]
        })
        .Class({
            constructor: function() {}
        });

    document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(Search.SearchComponent);
    });

})(window.Search || (window.Search = {}))

Hope you can help!

Answer 1

You have some typos:

<div *ngFor=#post of posts>

Should be:

<div *ngFor="#post of posts">