将数组传递到组件时为空数组（输入）
我使用请求API的结果创建多个数组。这是我按下按钮时调用的组件方法。
ngOnInit() {
// GetListeAnomalies(start_date : string, end_date : string) -> return an array this.servicePS.getListeAnomalies("2019-10-08", "2019-10-08").then( (anomalies : any) => {
for (let anomalie of anomalies){
switch (anomalie.type_anomalie) {
case "erreur_deltaT_recurrent": {
this.tab_delta_T_recurrent.push(anomalie);
break;
}
case "erreur_absence_emission": {
this.tab_absence_emission.push(anomalie);
break;
}
case "erreur_delta_T_trop_grand":{
this.tab_deltaT_trop_grand.push(anomalie);
break;
}
case "erreur_capteur_batterie_faible":{
this.tab_capteur_batterie_faible.push(anomalie);
break;
}
case "erreur_device_a_remplacer_grande_derive":{
this.tab_device_a_remplacer_grande_derive.push(anomalie);
break;
}
default: {
this.tab_other.push(anomalie)
}
}
}
}
) } 然后，我想在名为“ tableau-anomalies”的组件中传递这些数组。所以我用这行：
<app-tableau-anomalies [tabValeurs]="tab_delta_T_recurrent"> 在我的组件中，我尝试使用Input值，但是此值未正确初始化。查看我组件的代码（和我的注释）
export class TableauAnomaliesComponent implements OnInit {
@Input() tabValeurs: any;
constructor() { }
ngOnInit() {
console.log(this.tabValeurs.length); //Return 0
console.log(this.tabValeurs); //Return CORRECTLY my array with my data.
for (let anomalie in this.tabValeurs){
console.log(anomalie); //This iteration is not called --> no return, not even 'undefined' is written in the console.
}
} } 我认为有像Promise或Subscribe这样的解决方案吗？但是我不知道该如何使用它……那么您能帮我吗？您有解决方案的主意吗？
提前致谢 ：）
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
在Angular中，当使用@Input()装饰器从父组件向子组件传递数据时，可能会遇到数据初始化时机的问题。这是因为Angular的变更检测机制可能不会立即反映更新，尤其是在异步操作完成之后。
您提到的Promise和subscribe方法是处理异步数据的好方式，但在这个场景下，问题更多在于确保子组件的数据已经准备好后再进行操作。
解决方案
-
使用
ngOnChanges生命周期钩子: 当输入属性(@Input())发生变化时，Angular会调用ngOnChanges生命周期钩子。您可以在这里处理数组的变化。export class TableauAnomaliesComponent implements OnChanges { @Input() tabValeurs: any; ngOnChanges(changes: SimpleChanges) { if (changes.tabValeurs && changes.tabValeurs.currentValue) { console.log(this.tabValeurs.length); for (let anomalie of this.tabValeurs) { console.log(anomalie); } } } // ...其他代码 } -
确保数据已加载完毕再显示子组件: 在父组件中，可以先隐藏子组件，直到
getListeAnomalies的Promise解析完毕，数据准备就绪后再显示子组件。 -
Async Pipe: 如果您的数据流来自Observables而不是Promises，考虑使用Angular的Async Pipe直接在模板中订阅数据，这会自动处理订阅和清理工作，但看起来这不是当前情况。
-
确保数据传递正确: 确保在将数据绑定到子组件之前，
this.tabValeurs已经被赋值且非空。如果在某些情况下它可能是undefined或null，可以在子组件中添加一个简单的检查。
注意点
- 您的循环语法
for (let anomalie in this.tabValeurs)遍历的是数组索引而非元素本身，应该改为for (let anomalie of this.tabValeurs)来直接遍历数组的每个元素。 - 确保在父组件中，
tab_delta_T_recurrent,tab_absence_emission等数组被正确地赋给了tabValeurs这个@Input()属性。
希望这些建议能帮助您解决问题！
