Angular 5 @Input 在 ngOnInit() 上始终未定义
2018-06-17
1027
我正在开发一个 angular firebase 应用,但我不知道如何解决问题。 我的 @Input 在 ngOnInit() 上始终未定义,但我必须使用此输入值初始化某些内容。
ERROR TypeError: Cannot read property 'length' of undefined
我尝试添加 *ngIf(如我在类似帖子中看到的那样)或初始化我的房间,但没有任何效果。我必须使用超时吗?还是有更好的方法?
以下是详细信息:
玩家组件:
@Input() room: Room;
players: Player[];
playersSubscription: Subscription;
constructor(private playerService: PlayerService, private router: Router) { }
ngOnInit() {
this.playersSubscription = this.playerService.playersSubject.subscribe(
(players: Player[]) => {
this.players = players;
}
);
this.playerService.getPlayersRoom(this.room.players);
this.playerService.emitPlayers();
}
html:
<div *ngIf="room">
<ul>
<li *ngFor="let p of room.players">{{p}}</li>
</ul>
</div>
usernames:
<div *ngIf="players">
<ul>
<li *ngFor="let player of players">
{{player.username}} // This will not works
</li>
</ul>
</div>
服务:
getPlayersRoom(ids: string[]) {
while (ids.length > 0) {
var id = ids.splice(0, 1)[0];
firebase.database().ref('/users/').child(id).once('value', function (snapshot) {
this.players.push(snapshot.val());
});
}
this.emitPlayers();
}
房间:
room: Room;
constructor(private router: Router,
private route: ActivatedRoute,
private roomService: RoomService
) { }
ngOnInit(): void {
this.room = new Room();
const id = this.route.snapshot.params['id'];
this.roomService.getRoom(+id).then(
(room: Room) => {
this.room = room;
}
);
}
html:
<div *ngIf="room">
Room n°{{room.id}} + password {{room.password}}
<h1>PLAYERS room</h1>
<div *ngFor="let p of room.players">
{{p}}
</div>
Players:
<app-players *ngIf="room" [room]="room"></app-players>
end
</div>
编辑: 问题出在 ngOnInit(玩家组件)中:此时 @Input 未定义(然后它正在执行 getPlayersRoom(undefined) )。有人知道吗?在构造函数/ngoninit 中无法使用 @Input?那我该怎么做?
2个回答
这是直觉反应,但看起来您的
roomService.getRoom(+id)
是异步的,这意味着取决于您初始化
new Room()
时发生的情况,该属性在初始化子组件时可能仍为
undefined
。
编辑:经过反思,也许您只需要在前面将数组属性声明为空数组:
players: Player[] = []
Ben Steward
2018-06-17
我找到了一个替代解决方案:
服务:
getPlayersRoom(ids: string[]) {
for(let i=0;i<ids.length;i++){
this.getPlayer(ids[i]).then(
(player: Player) => {
if(player){
this.players.push(player);
}
}
);
}
this.emitPlayers();
}
组件: 我实现了 OnChanges,然后:
ngOnChanges(){
if(Object.keys(this.room).length>0){
this.playerService.getPlayersRoom(this.room.players);
}
}
我不认为这是最好的方法,但至少它是有效的。
Emeric
2018-06-19