각도 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; 

} 

어떤 도움이 될 것 MU 감사합니다.

미리 감사드립니다.

Answer 1

TweetsComponent의 directives에 오타가 있습니다. TweetListComponent (TweetsComponent)가 아닌 TweetItemComponent (TweetComponent)의 클래스 이름을 전달해야합니다. 이것이 내가 단수형과 복수형 대신 명시 적으로 "항목"과 "목록"을 사용하는 것을 선호하는 이유 중 하나입니다.

다음과 같이 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(); 
    } 

}