我有一个角度组件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，所以我真的不知道任何超过英雄在教程那一刻，尽管通过一些谷歌搜索，我已经看到了诸如猫王操作员的东西？和异步管道，但这些都不工作！
我认为这个'