入力変数サーバーを取り、この変数をテンプレートで使用する角度成分ランクエントリがあります。このコンポーネントは、ランク表コンポーネントによって使用されます。ランク表コンポーネントは、すべて異なるサーバーを表すランク・エントリのリストです。サーバーのリストは、サーバー・サービスから約束を得るランク表getServers（）メソッドから取得されます。これはすべて期待通りに機能します。角度2の約束からコンポーネントに入力を渡す方法
ここでは、より具体的なサーバーディテールを作成しようとしています。これはroute/detail /：idからアクセスされ、このコンポーネントは、1つのサーバだけのランクエントリでなければならない1つの行だけを持つテーブルを作成します。私は、サーバサービスからgetServer（id）メソッドを使用することができると期待していました。サーバの詳細に約束されたサーバを与えてから、サーバをhtmlのランクエントリコンポーネントに渡すことができます。エラー：
私はランクエントリコンポーネントがサーバー・ディテール・コンポーネントによって作成されたときの約束がまだ解決されていないので、これは可能かもしれないと思うError: Uncaught (in promise): Error: Error in ./RankEntryComponent class RankEntryComponent - inline template:4:4 caused by: undefined is not an object (evaluating 'self.context.server.online')
とランクエントリは、サーバーを持っていませんオブジェクト？
ご協力いただきありがとうございます！
サーバーdetail.component.ts
import {Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { Server } from './utilities/Server';
import { ServerService } from './server.service';
@Component({
selector: 'app-server-detail',
templateUrl: 'server-detail.component.html'
})
export class ServerDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private serverService: ServerService
){}
@Input()
server: Server;
ngOnInit(): void {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.serverService.getServer(id).then(server => {this.server = server});
})
}
}
ランクentry.component.ts
import { Component, Input } from '@angular/core';
import { Server } from './utilities/Server';
@Component({
selector: 'tr[app-rank-entry]',
templateUrl: './rank-entry.component.html'
})
export class RankEntryComponent {
@Input()
server: Server;
}
ランクentry.component.html
<th scope="row">{{server.rank}}</th>
<td>{{server.name}}</td>
<td><img [src]="this.server.img"/></td>
<td>{{server.currPlayers}}/{{server.maxPlayers}}</td>
<td *ngIf="server.online">Online</td><td *ngIf="!server.online">Offline</td>
server.service。 ts
import { Injectable } from '@angular/core';
import { Server } from './utilities/Server';
import { SERVERS } from './utilities/mock-servers';
@Injectable()
export class ServerService {
getServers(): Promise<Server[]> {
return Promise.resolve(SERVERS);
}
getServer(id: number): Promise<Server> {
return this.getServers().then(servers =>
servers.find(server => server.id === id));
}
}
そして私のサーバー-detail.component.htmlがちょうどそうのようなランクエントリコンポーネント作成：<tr app-rank-entry [server]="server"></tr>
を私はので、私は本当にヒーローでチュートリアルより多くの何も知らない角度2のみに新たなんです私はElvisオペレータのようなものを見てきました。と非同期パイプはどちらも動作しません！ angular2観測可能で
私はこの '