Question

我不完全确定我在这里做错了什么，但是如果我将模板更改为templateUrl并在template / post.html中创建模板，则该模板文件中的* ngFor可以正常工作。

(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 = {}))

希望你能帮忙！

Answer 1

你有一些拼写错误：

<div *ngFor=#post of posts>

应该是：

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

Angular2 - 在组件内部使用ngFor不会打印出内容

1 个答案: