离子 4：在帮助程序服务中'Typescript error' 无法读取帮助程序服务中未定义的属性'length'

Question

尝试循环遍历在帮助程序服务类中作为参数传递的数组时，出现错误"无法读取 HelperService.addCommasToArray 中未定义的属性'length' [打字稿]

我真的不确定为什么这不起作用 - 我相信它应该很简单 - 我要做的就是将数组作为参数传入并在数组中的每个值中添加一个"，"(最后一个值除外)

这是我的帮助程序服务类方法：

export class HelperService {
constructor() { }
/*
* Add commas to every value in the array except for the last value
*/
addCommasToArray(array: Array<any>) : Array<any> {
for (let i = 0; array.length; i++){
array[i] += ", ";
}
return array;
}     
}

然后我在另一个 ts 类的 ngInit 中调用此方法

this.helperService.addCommasToArray(this.previousClubs);

这是ngInit方法

public previousClubs: Array<any>;
constructor(private playersService: PlayersService,private 
helperService: HelperService, private route: ActivatedRoute) { }
ngOnInit() {
const playerId: string = this.route.snapshot.paramMap.get('id');
this.playersService.getPlayerDetails(playerId).get()
.then(playerDetailsSnapshot=> {
this.currentPlayerDetails = playerDetailsSnapshot.data();
this.currentPlayerDetails.id = playerDetailsSnapshot.id;    
});
/*
* Return Previous Clubs 
*/
this.playersService.getPreviousClubs(playerId).get().then( 
previousClubsSnapshot =>{
this.previousClubs = [];
previousClubsSnapshot.forEach(snap => {
this.previousClubs.push({
id: snap.id,
name: snap.data().name,
});
return false;
});        
}); 
this.helperService.addCommasToArray(this.previousClubs);
}

Answer 1

所以在这里：

this.playersService.getPreviousClubs(playerId).get().then( 
previousClubsSnapshot =>{
this.previousClubs = [];
previousClubsSnapshot.forEach(snap => {
this.previousClubs.push({
id: snap.id,
name: snap.data().name,
});
return false;
});        
});
// this line executes without awaiting for .then enclosed scope
this.helperService.addCommasToArray(this.previousClubs);

基本上，你甚至在你的previousClubsvar被分配给它的数组之前调用addCommasToArray，然后把它的所有项目都推入。要修复由于您的方法是 (.then) 异步的，您需要在 .then 执行范围内调用此方法：

ngOnInit() {
const playerId: string = this.route.snapshot.paramMap.get('id');
this.playersService.getPlayerDetails(playerId).get()
.then(playerDetailsSnapshot=> {
this.currentPlayerDetails = playerDetailsSnapshot.data();
this.currentPlayerDetails.id = playerDetailsSnapshot.id;    
});
/*
* Return Previous Clubs 
*/
this.playersService.getPreviousClubs(playerId).get().then( 
previousClubsSnapshot =>{
this.previousClubs = [];
previousClubsSnapshot.forEach(snap => {
this.previousClubs.push({
id: snap.id,
name: snap.data().name,
});
return false;
});        
});
this.helperService.addCommasToArray(this.previousClubs);
}