コンポーネントからモデルメソッドへの呼び出し時にエラーが機能しない

Question

コンポーネントテンプレートからモデルメソッドを呼び出しようとするとこのエラーが発生します。

error in ./NewsListComponent class NewsListComponent - inline template:3:12 caused by: self.context.$implicit.toggleState 

私はAPIからのニュースを取得し、私は私が（クリック）イベントを追加し、toggleStateにニュースから（）メソッドを呼び出すようにしようとしているtemplate.Then私のコンポーネントでニュースを見ることができます。私は英雄ツアーの後に何かをしているだけです。

ここで私はいくつかのコード

---

news.model.ts

export class News { 
    constructor(
     id: number, 
     title: string, 
     news: string, 
     path: string, 
     date: Date,  
     public state = 'inactive', 
    ) {} 

    public toggleState() 
    { 
     this.state = (this.state === 'active' ? 'inactive' : 'active'); 
    } 
} 

news.service.ts

import { Injectable }  from '@angular/core'; 
import { Http, 
     Response, 
     Headers, 
     RequestOptions } from '@angular/http'; 

import { Observable }  from 'rxjs/Observable'; 

import { News }    from './news.model'; 

@Injectable() 
export class NewsService { 
    private url = 'http://127.0.0.1:8000/app_dev.php/news'; 

    constructor(private http:Http){} 

    getNews(): Observable<News[]> { 
     let headers = new Headers({ 
      'Content-Type': 'application/json' 
     }); 
     let options = new RequestOptions({ 
      headers: headers 
     }); 
     return this.http 
        .get(this.url, options) 
        .map(this.extractData) 
        .catch(this.handleError);      
    } 

    private handleError (error: Response | any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 

    private extractData(res: Response) { 
     let body = res.json() 
     return body || { }; 
    } 
} 

ニュース-list.componentを表示.ts

import { 
    Component, 
    OnInit, 
    Input, 
    trigger, 
    state, 
    style, 
    transition, 
    animate }   from '@angular/core'; 

import { News }   from './news.model'; 
import { NewsService } from './news.service'; 

@Component({ 
    selector: 'news-list', 
    template: ` 
     <div class="col-sm-8"> 
      <h2>Noticias</h2> 
      <div class="media" *ngFor="let news_ of news" 
       [@newsState]="news_.state" 
       (click)="news_.toggleState()"> 
       <div class="media-right media-middle"> 
        <a href="#"> 
         IMG 
        </a> 
       </div> 
       <div class="media-body media-middle"> 
       <h4 class="media-heading">{{news_.title}}</h4> 
       <p>{{news_.news}}</p> 
       <hr> 
       </div> 
      </div> 
     </div>   
    `, 
    animations: [ 
     trigger('newsState', [ 
     state('inactive', style({ 
      backgroundColor: '#eee', 
      transform: 'scale(1)' 
     })), 
     state('active', style({ 
      backgroundColor: '#cfd8dc', 
      transform: 'scale(1.1)' 
     })), 
     transition('inactive => active', animate('100ms ease-in')), 
     transition('active => inactive', animate('100ms ease-out')) 
     ]) 
    ], 
}) 
export class NewsListComponent implements OnInit { 
    error: string; 
    @Input() news: News[]; 
    mode = 'Observable'; 
    constructor(private newsService: NewsService) {; 
    } 

    ngOnInit() {   
     this.newsService.getNews() 
      .subscribe(
       (news: News[]) => this.news = news, 
       error => this.error = <any>error 
      ); 
    } 
} 

news.module.ts

import { NgModule }    from '@angular/core'; 
import { CommonModule }   from '@angular/common'; 

import { NewsService }   from './news.service'; 
import { NewsListComponent } from './news-list.component'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
    ], 
    declarations: [ 
     NewsListComponent   
    ], 
    providers: [ 
     NewsService 
    ], 
    exports: [ 
     NewsListComponent 
    ],   
}) 

export class NewsModule {} 

私が間違って何をしているのですか？ ありがとうございます。

---

編集：私はニュースのオブジェクトを作成する場合は、明示的に、私はエラーを取得しない、News[]は本当にニュースオブジェクトが移入されていないようです。

---

問題はAJT_82によって解決されました！

ngOnInit() { 
    this.newservice.getNews() 
     .subscribe(data => { 
      data.forEach(n => { 
       let newsObj: News = new News(n.id, n.title, n.news, n.path, n.date); 
       this.news.push(newsObj); 
      }) 
     }); 
} 

Answer 1

これはちょうどので同じように、サブスクリプションビットを変更することで解消する必要があります

ngOnInit() { 
    this.newservice.getNews() 
     .subscribe(data => { 
      data.forEach(n => { 
       let newsObj: News = new News(n.id, n.title, n.news, n.path, n.date); 
       this.news.push(newsObj); 
      }) 
     }); 
} 

この方法で、各ニュースはNewsのインスタンスになりますと、そのようなあなたのtoggleStateなどの適切な方法を、持っています-方法。

希望すると便利です。