Question

我正在项目中使用Primeng的Listbox和ngx-bootstrap的下拉组件。我在项目中使用了这些组件，其方式是列表框位于ngx下拉列表中。

<!--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>

我在模板中创建了一个变量（#listbox），所以我可以在我的ts中访问它。所以我试图执行@ViewChild但是。我总是未定义。

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

 }
}

请注意，我已经在NgAfterViewInit中控制它，并且仍然为ViewChild获取未定义的值。

出于测试的目的，我尝试将primeng的Listbox移出ngx下拉列表，它有一个值。 BUt当我尝试将列表框放在ngxdropdown中时，viewChild是未定义的。至于我的应用程序需求，我真的需要将列表框放在ngx中。

Answer 1

将<!DOCTYPE html>添加到您的模板中：

<!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>

在组件内部的组件上使用@ViewChild获取未定义的值

1 个答案: