this.slides.length() 无法读取未定义的属性'length'

Question

console.log(this.slides.length());打印Cannot read property 'length' of undefined.在 100setTimeout，打印。

是否有任何方法可以识别子组件是否已从父组件完全加载？

<ion-content padding class="ttct-app-content">
<ion-slides>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
@Component({
selector: 'page-compose',
templateUrl: 'compose.html',
})
export class Compose {
@ViewChild(Slides) slides: Slides;
constructor(public navCtrl: NavController) {
}
ngAfterViewInit(){
console.log(this.slides.length()); //Cannot read property 'length' of undefined
//works
/*
setTimeout(()=>{    
console.log(this.slides.length());
},100); 
*/
}
}

Answer 1

试试这个(你不需要导入任何其他东西(：

ionViewDidEnter() {
console.log(this.slides.length());
}

也尝试使用使用 ngFor 加载的滑块，并像魅力一样工作

Answer 2

尝试将该控制台日志放入：

ionViewDidLoad() { 
}

而不是 ngAfterViewInit((。

Answer 3

从孩子的 onInit 中提出一个事件并在父母中观看它怎么样？ https://angular.io/guide/component-interaction#parent-listens-for-child-event

Answer 4

看起来发生这种情况是因为<ion-slide></ion-slide>子项未在页面挂钩上初始化。这就是为什么当你把setTimeout()作品放在一起时，因为在此之前它们会被初始化并添加到<ion-slides>父级。 在钩子之后，您可以通过单击按钮进行检查以读取length()属性。 你可以在这里找到一个工作。

Answer 5

尝试创建此方法以访问长度

get slides_length() {
if (this.slides && this.slides._slides) {
return this.slides._slides.length;
}
return 0;
}