角型テンプレートが間違っている

Question

私はAngularフレームワークを使ってアプリケーションを実装しようとしています。私は現在WebSocketsを使用してサーバーとの通信に取り組んでおり、今まではすべてがうまくいきました。

私はそうのようなコンポーネントを作成しています。HTMLのすべてをローカルホストに表示されるようになっている

import { CountdownService, Countdown } from './countdown.service'; 
import { Component } from '@angular/core'; 
import * as Rx from 'rxjs/Rx'; 

@Component({ 
moduleId: module.id, 
selector: 'my-countdown', 
templateUrl: 'countdown.component.html' 
}) 
export class CountdownComponent { 

itemName = 'Computer'; 

private countdown: Countdown; 
constructor(private countdownService: CountdownService) { 
    countdownService.countdowns.subscribe(time => {   
     this.countdown = time; 
    }); 
} 

} 

：3000ので、それは前だったが、今countdown.component.htmlの内容がされていますURLに移動：

http://localhost:3000/app/countdown.component.html 

私は本当にこれを引き起こす可能性があるか分からない。

import { Injectable } from '@angular/core'; 
import { Observable, Subject } from 'rxjs/Rx'; 
import {WebSocketService } from './websocket.service'; 

const AUCTION_URL = 'ws://localhost:9999'; 

export interface Countdown { 
days: number, 
hours: number, 
minutes: number, 
seconds: number 
} 

@Injectable() 
export class CountdownService { 
public countdowns: Subject<Countdown>; 

constructor(wsService: WebSocketService) { 
    this.countdowns = <Subject<Countdown>>wsService 
     .connect(AUCTION_URL) 
     .map((response: MessageEvent): Countdown => { 
      let data = JSON.parse(response.data); 
      return { 
       days: data.days, 
       hours: data.hours, 
       minutes: data.minutes, 
       seconds: data.seconds 
      } 
     }); 
} 
} 

これはおそらく解決するのは非常に簡単ですが、私はAngularを初めて利用しているので、どんな助けにも感謝しています。

編集：ここでは主成分である：

import { Component } from '@angular/core'; 

@Component({ 
selector: 'my-app', 
template: ` 
<h1>{{title}}</h1> 
<my-countdown>Loading countdown ...</my-countdown> 
<my-bidding>Loading bidding ...</my-bidding> 
<my-bidlist>Loading bidlist ...</my-bidlist> 
<my-popup></my-popup> 
` 
}) 
export class AppComponent { 

title = 'Electronics Auction'; 

} 

そして、私の@NgModule：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 
import { BiddingComponent } from './bidding.component'; 
import { CountdownComponent } from './countdown.component'; 
import { BidlistComponent } from './bidlist.component'; 
import { PopupComponent } from './popup.component'; 

import { CountdownService } from './countdown.service'; 
import { WebSocketService } from './websocket.service'; 

@NgModule({ 
imports:  [ BrowserModule ], 
declarations: [ 
    AppComponent, 
    BiddingComponent, 
    CountdownComponent, 
    BidlistComponent, 
    PopupComponent 
], 
providers: [CountdownService, WebSocketService], 
bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Answer 1

あなたのコンポーネントCountdownComponent変数countdownは、あなたのテンプレートがcountdown.daysこの意志を使用してレンダリングされたときに設定値がありませんcountdownServiceサブスクリプションでまだcountdownの値が設定されていないため、エラーは未定義です。

この問題を解決するには、2つの方法があります。あなたのコンポーネントで

オプション1：あなたのテンプレートで

private countdown: Countdown = {days: null, hours: null, minutes: null, seconds: null}; 

---

オプション2：あなたは、HTTPを訪問したときに

{{countdown?.days}} 
{{countdown?.hours}} 
{{countdown?.minutes}} 
{{countdown?.seconds}}