입력 변수 서버를 사용하여이 변수를 템플릿에 사용하는 각도 구성 요소 순위 엔트리가 있습니다. 이 구성 요소는 서로 다른 서버를 나타내는 순위 항목 목록 인 순위 테이블 구성 요소에서 사용되며 서버 목록은 서버 서비스에서 약속을 가져 오는 순위 테이블 getServers() 메소드에서 가져옵니다. 이것은 모두 예상대로 작동합니다.각도 2의 약속에서 구성 요소로 입력을 전달하는 방법
이제 더 구체적인 구성 요소 인 서버 세부 정보를 만들려고합니다. 이것은 route/detail/: id에서 액세스되며이 구성 요소는 단 하나의 서버에 대한 순위 항목이어야하는 하나의 행만있는 테이블을 작성합니다. 서버 정보에서 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>
내가이 각도 만 새로 온 사람 그래서 난 정말 영웅에서 튜토리얼보다 아무것도 더 알고하지 않습니다 그 순간, 일부 인터넷 검색을 통해 엘비스 운영자와 같은 것들을 보았습니까? 및 비동기 파이프하지만 둘 다 작동하지! angular2 관측에
이 '