2017-10-02 2 views
0

Ich verwende Primengs Listbox und die Dropdown-Komponenten eines ngx-bootstrap in meinem Projekt. Ich habe diese Komponenten in meinem Projekt so verwendet, dass sich die Listbox im ngx-Dropdown befindet.@ViewChild für eine Komponente innerhalb einer Komponente verwenden, die einen undefinierten Wert erhält

<!--this is a ngx dropdown--> 
<ul *dropdownMenu class="dropdown-menu" role="menu" > 
    <div class="well well-dropdown">Customize Grid</div> 

     <!-- this is a primeng listbox --> 
     <p-listbox #listbox [options]="persons" [filter]="false" [(ngModel)]="selectedPerson" [multiple]="true" [checkbox]="true" [metaKeySelection]="false" [style]="{'max-height':'150px'}">    
     </p-listbox> 

</ul> 

habe ich eine Variable in der Vorlage (#listbox), so kann ich es in meinem ts zugreifen. Also habe ich versucht, @ViewChild aber auszuführen. Ich werde immer undefiniert.

export class MyComponent implements OnInit, AfterViewInit{ 

@ViewChild('listbox') mylist: Listbox; 


ngOnInit(){ 
    console.log(this.mylist); // ==> getting undefined value 
} 

ngAfterViewInit(){ 
    console.log(this.mylist); // ==> still getting undefined value 

} 
} 

Beachten Sie, dass ich es schon in NgAfterViewInit trösten und noch nicht definierten Wert für die ViewChild bekommen.

Zu Testzwecken habe ich versucht, die Primeng's Listbox aus dem ngx Dropdown zu verschieben und es hat einen Wert. Wenn ich versuche das Listenfeld in den ngxdropdown zu legen, ist das viewChild nicht definiert. Wie für meine Anwendung muss ich wirklich die Listbox in der ngx platzieren.

+0

Ihr listbox innerhalb Embedded befindet – yurzui

+0

Wie kann ich das in ts gleicher Art, wie ich mit viewchild zugreifen kann? – ilovejavaAJ

+0

Versuchen Sie, ViewChildren mit valueChanges oder Setter https://StackOverflow.com/Questions/46251282/angular-viewchild-fileinput-annotation-is-undefined/46251375#46251375 – yurzui

Antwort

0

hinzufügen <!DOCTYPE html> zu Ihrer Vorlage:

<!DOCTYPE html> 
<!--this is a ngx dropdown--> 
<ul *dropdownMenu class="dropdown-menu" role="menu" > 
    <div class="well well-dropdown">Customize Grid</div> 

     <!-- this is a primeng listbox --> 
     <p-listbox #listbox [options]="persons" [filter]="false" [(ngModel)]="selectedPerson" [multiple]="true" [checkbox]="true" [metaKeySelection]="false" [style]="{'max-height':'150px'}">    
     </p-listbox> 

</ul> 
+0

was ist der Zweck dieser? – ilovejavaAJ

Verwandte Themen