角度2のバインディングエラー

Question

私はシンプルなツイートアプリケーションを構築しています。ここに私のコードスニペットがあります。私はこのエラーで検索した

EXCEPTION: Template parse errors: Can't bind to 'data' since it isn't a known native property ("

<div *ngFor="#tweet of tweetList" > 
     <tweet [ERROR ->][data]="tweet"></tweet>   
    </div> 

"): TweetsComponent@3:18

、およびこのエラーにつながる可能性があるすべての根本的な原因と照合している、そしてそれは私にすべての罰金になります。このアプリを実行しているとき、私は以下のエラーを取得しています。ここで

があり、私のコンポーネントとサービス：

TweetService：

export class TweetService{ 

getTweetService() { 

    return [ 
      { 
       imageUrl: "http://lorempixel.com/100/100/people/?1", 
       author: "Windward", 
       handle:"@windwardstudios", 
       tweetText:"Looking for a better company reporting or docgen app?" 

      }, 
      { 
       imageUrl: "http://lorempixel.com/100/100/people/?2", 
       author: "AngularJS News", 
       handle:"@angularjs_news", 
       tweetText:"Right Relevance : Influencers, Articles and Conversations" 

      }, 
      { 
       imageUrl: "http://lorempixel.com/100/100/people/?3", 
       author: "UX & Bootstrap", 
       handle: "@3rdwave", 
       tweetText: "10 Reasons Why Web Projects Fail" 

      } 
    ]; 
} 
} 

TweetsComponent：

import {Component} from 'angular2/core'; 
import {TweetService} from './tweet.service'; 
import {TweetComponent} from './tweet.component'; 
@Component({ 

selector:'tweets', 
template: 
` 

    <div *ngFor="#tweet of tweetList" > 
     <tweet [data]="tweet"></tweet>   
    </div> 

`, 
providers: [TweetService], 
directives: [TweetsComponent] 
}) 

export class TweetsComponent{ 
tweetList; 

constructor(tweetService: TweetService){ 

    this.tweetList = tweetService.getTweetService(); 
} 

} 

TweetComponent：

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

@Component({ 

selector:'tweet', 
template: 
` 
<div class="media"> 
    <div class="media-left"> 
     <a href="#"> 
     <img class="media-object" src="{{ data.imageUrl }}" alt="media-object"> 
     </a> 
    </div> 
    <div class="media-body"> 
     {{ data.author }} <span class="handle">{{ data.handle }}</span> 
     {{ data.tweetText }}    
    </div> 
</div>  
`, 
styles:[ 
    ` 
    .media{ 
     margin-left: 30px; 
     margin-top: 20px; 
    } 
    .handle{ 
     color: #ccc; 
    } 

    ` 
    ] 
}) 

export class TweetComponent{ 
    constructor(){ 
     console.log(this.data) 
    } 
    @Input() data; 

} 

すべてのヘルプは次のようになりムーおかげさまで

ありがとうございます!!!

Answer 1

TweetsComponentの入力がdirectivesです。 TweetListComponent（TweetsComponent）ではなく、TweetItemComponent（TweetComponent）のクラス名を渡す必要があります。これは、単数形や複数形の代わりに明示的に「Item」と「List」を使用する方が好きな理由の1つです。

は、以下の通りごTweetsComponentを交換してください：

import {Component} from 'angular2/core'; 
import {TweetService} from './tweet.service'; 
import {TweetComponent} from './tweet.component'; 
@Component({ 
    selector:'tweets', 
    template: 
    ` 

     <div *ngFor="#tweet of tweetList" > 
      <tweet [data]="tweet"></tweet>   
     </div> 

    `, 
    providers: [TweetService], 
    directives: [TweetComponent] 
}) 
export class TweetsComponent{ 
    tweetList; 

    constructor(tweetService: TweetService){ 
     this.tweetList = tweetService.getTweetService(); 
    } 

}