我有一個角度組件rank-entry需要一個輸入變量服務器，然後在模板中使用這個變量。這個組件被一個等級表組件使用，這個等級組件只是一個列表項，全部代表不同的服務器，服務器列表來自rank-tables getServers（）方法，它從服務器服務獲得承諾。這一切都按預期工作。如何將輸入傳入組件Angular 2中的承諾
現在我試圖製作一個更具體的組件，server-detail。這是從route/detail /：id訪問的，這個組件創建一個只有一行的表，它應該是一個服務器的排序條目。我期待我能夠使用服務器服務的getServer（id）方法，這會給服務器細節一個承諾的服務器，然後服務器可以給予html中的rank-entry組件，但我得到錯誤：
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，所以我真的不知道任何超過英雄在教程那一刻，儘管通過一些谷歌搜索，我已經看到了諸如貓王操作員的東西？和異步管道，但這些都不工作！
我認爲這個'