角度2 - コンポーネント

Question

での入力パラメータのテンプレートパースエラー私は私のコンポーネントで記事をページ付けていると私はこれを好きにページ付けコンポーネントにポスト・コンポーネントからの投稿の数を送っています：

<pagination [items]="posts.length" (page-changed)="onPageChanged($event)"></pagination> 

I

export class PaginationComponent implements OnChanges { 
    @Input() items: number; 

しかし、私はエラーを取得する：ページネーションコンポーネントなどのようなパラメータ項目を設定している

EXCEPTION: Template parse errors: 
Can't bind to 'items' since it isn't a known native property (" 
     </select> 
     <spinner [visible]="postsLoading"></spinner> 
     <pagination [ERROR ->][items]="posts.length" (page-changed)="onPageChanged($event)"></pagination> 
     <ul class="list-g"): PostsComponent@10:20 

私は間違って何をしていますか？

これは完全なページネーションコンポーネントです：

import {Component, Input, Output, EventEmitter} from 'angular2/core'; 
import {OnChanges} from 'angular2/core'; 

@Component({ 
     selector: 'pagination', 
    template: ` 
    <nav *ngIf="items > pageSize"> 
     <ul class="pagination"> 
      <li [class.disabled]="currentPage == 1"> 
       <a (click)="previous()" aria-label="Previous"> 
       <span aria-hidden="true">&laquo;</span> 
       </a> 
      </li> 
      <li [class.active]="currentPage == page" *ngFor="#page of pages" (click)="changePage(page)"> 
       <a>{{ page }}</a> 
      </li> 
      <li [class.disabled]="currentPage == pages.length"> 
       <a (click)="next()" aria-label="Next"> 
       <span aria-hidden="true">&raquo;</span> 
       </a> 
      </li> 
     </ul> 
    </nav> 
` 
}) 
export class PaginationComponent implements OnChanges { 
    @Input() items: number; 
    @Input('page-size') pageSize = 10; 
    @Output('page-changed') pageChanged = new EventEmitter(); 
    pages: any[]; 
    currentPage; 

    ngOnChanges(){ 
    this.currentPage = 1; 

     var pagesCount = Math.ceil(this.items/this.pageSize); 
     this.pages = []; 
     for (var i = 1; i <= pagesCount; i++) 
      this.pages.push(i); 
    } 

    changePage(page){ 
     this.currentPage = page; 
     this.pageChanged.emit(page); 
    } 

    previous(){ 
     if (this.currentPage == 1) 
      return; 

     this.currentPage--; 
     this.pageChanged.emit(this.currentPage); 
    } 

    next(){ 
     if (this.currentPage == this.pages.length) 
      return; 

     this.currentPage++; 
     this.pageChanged.emit(this.currentPage); 
    } 
} 

そして、これはポストのコンポーネントです：

import {Component, OnInit} from 'angular2/core'; 
import {PostService} from '../services/post.service'; 
import {UserService} from '../services/user.service'; 
import {SpinnerComponent} from './spinner.component'; 
import {PaginationComponent} from './pagination.component'; 

@Component({ 
    templateUrl: 'app/templates/posts.template.html', 
    styles: [` 
     .posts li { cursor: default; } 
     .posts li:hover { background: #ecf0f1; } 
     .list-group-item.active, 
     .list-group-item.active:hover, 
     .list-group-item.active:focus { 
      background-color: #ecf0f1; 
      border-color: #ecf0f1; 
      color: #2c3e50; 
     } 
     .clickable { 
      cursor: pointer; 
     } 
     .thumbnail { 
      border-radius: 100%; 
     } 
    `], 
    providers: [PostService, UserService], 
    directives: [SpinnerComponent] 
}) 
export class PostsComponent implements OnInit { 
     posts = []; 
    users = []; 
    pagedPosts = []; 
    postsLoading; 
    commentsLoading; 
    currentPost; 
    pageSize = 10; 

    constructor(
     private _postService: PostService, 
     private _userService: UserService) { 
    } 

    ngOnInit() { 
     this.loadUsers(); 
     this.loadPosts(); 
    } 

    private loadUsers(){ 
     this._userService.getUsers() 
      .subscribe(users => this.users = users); 
    } 

    private loadPosts(filter?){ 
     this.postsLoading = true; 
      this._postService.getPosts(filter) 
       .subscribe(
       posts => { 
        this.posts = posts; 
        this.pagedPosts = this.getPostsInPage(1); 
       }, 
       null, 
      () => { this.postsLoading = false; }); 
    } 

    reloadPosts(filter){ 
     this.currentPost = null; 

     this.loadPosts(filter); 
    } 

    select(post){ 
      this.currentPost = post; 

     this.commentsLoading = true; 
     this._postService.getComments(post.id) 
      .subscribe(
       comments => this.currentPost.comments = comments, 
       null, 
       () => this.commentsLoading = false); 
    } 

    onPageChanged(page) { 
      this.pagedPosts = this.getPostsInPage(page); 
    } 

    private getPostsInPage(page){ 
     var result = []; 
      var startingIndex = (page - 1) * this.pageSize; 
     var endIndex = Math.min(startingIndex + this.pageSize, this.posts.length); 

     for (var i = startingIndex; i < endIndex; i++) 
      result.push(this.posts[i]); 

     return result; 
    } 
} 

そして、これはテンプレートです：

<h1>Posts</h1> 
<div class="row"> 
    <div class="col-md-6"> 
     <select class="form-control" (change)="reloadPosts({ userId: u.value })" #u> 
      <option value="">Select a user...</option> 
      <option *ngFor="#user of users" value="{{ user.id }}"> 
       {{ user.name }} 
      </option> 
     </select> 
     <spinner [visible]="postsLoading"></spinner> 
     <pagination [items]="posts.length" (page-changed)="onPageChanged($event)"></pagination> 
     <ul class="list-group posts"> 
      <li *ngFor="#post of pagedPosts" class="list-group-item" [class.active]="currentPost == post" (click)="select(post)"> 
       {{ post.title }} 
      </li> 
     </ul> 
    </div> 
    <div class="col-md-6"> 
     <div *ngIf="currentPost" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">{{ currentPost.title }}</h3> 
      </div> 
      <div class="panel-body"> 
       <p>{{ currentPost.body }}</p> 
       <hr/> 
       <spinner [visible]="commentsLoading"></spinner> 
       <div class="media" *ngFor="#comment of currentPost.comments"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object thumbnail" src="http://lorempixel.com/80/80/people?random={{ comment.id }}" alt="..."> 
         </a> 
        </div> 
        <div class="media-body"> 
         <h4 class="media-heading"> 
          {{ comment.name }} 
         </h4> 
         {{ comment.body }} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

私は追加するのを忘れpaginationからdirectivesへの配列postsコンポーネント。