问题出现在ViewChildren的生命周期钩子函数被触发后,DOM元素还未被渲染,因此ViewChildren返回undefined。要解决此问题,需要在ngAfterViewInit生命周期钩子函数中获取ViewChildren,并确保在DOM元素被渲染后再使用它们。
示例代码如下:
import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
@ViewChildren('item') itemElements: QueryList;
items: any[] = ['Item 1', 'Item 2', 'Item 3'];
ngAfterViewInit() {
console.log(this.itemElements); // This will return undefined
setTimeout(() => {
console.log(this.itemElements); // This will return the QueryList of elements
});
}
}
在上述示例中,我们在ViewChildren中定义了一个名为“item”的引用,并在ngAfterViewInit函数中获取了QueryList。但是,此时获取的QueryList会返回undefined。为了解决这个问题,我们使用了一个setTimeout函数来延迟获取QueryList,确保DOM元素已被渲染。
以上就是解决Angular中ViewChildren返回undefined问题的方法。