2016-07-01 31 views
7

在我的Home.html:如何在Angular2中使用@ViewChildren?

<p #pmessage>msg 1</p> 
<p #pmessage>msg 2</p> 
<p #pmessage>msg 3</p> 
<p #pmessage>msg 4</p> 

在我home.ts:

export class HomePage { 
    @ViewChildren('pmessage') pMessages; 

    constructor() { 
     //using first works, result <p>msg 1</p> 
     console.log(this.pMessages.first.nativeElement); 
     //using last also works, result <p>msg 4</p> 
     console.log(this.pMessages.last.nativeElement); 
     //How can I get the two in the middle? i.e <p>msg 2</p> and <p>msg 3</p> 
     //this isn't working 
     console.log(this.pMessage[1].nativeElement); 
     //this either isn't working 
     console.log(this.pMessage.1.nativeElement); 
    } 
} 

请帮助。谢谢。

+0

您无法在构造函数中访问'this.pMessages'。它只在调用'ngAfterViewInit()'时设置。 –

+0

试试这个: console.log(this.pMessage.toArray()[1] .nativeElement); –

回答

2

访问pMessages时有错字。 's'丢失。你

`console.log(this.pMessages[1].nativeElement);` 

同时也应该访问ngAfterViewInit或更高版本viewChildren。在此之前,变量可能为undefined

+0

您的解决方案无法正常工作。请参阅我的plunkr:http://plnkr.co/edit/yuYQz7Mt1KGfzpWV0GrK?p=preview – Vicheanak