使用Angular中的ViewChild（）获取元素

Question

I want to get an table element which is inside an modal I am providing the modal html code bellow and how I am trying to access the data table. The datatable is of primeng

  <ng-template #industryModal>
<div class="modal-body">
  <h4>{{'Instance.IndustryModal.Header' | translate }}</h4>
  <p class="m-t-20">{{'Instance.IndustryModal.Branch' | translate }}: {{instanceObj['personaldata.Branch']}}</p>
  <p-table #dt [value]="industries" [paginator]=true [rows]="10" paginatorPosition="bottom" 
    [sortField]="sortField" [sortOrder]="sortOrder" styleClass="industry-data" [first]="first">

    <ng-template pTemplate="caption">
      <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
      <input type="text" pInputText size="50" placeholder="{{'Common.Search' | translate}}"
        (keyup)="dt.filterGlobal($event.target.value)" style="width:auto">
    </ng-template>
    <ng-template pTemplate="body" let-industry>
      <tr>
          <td>
            <div class="industry-list-item" (click)="selectIndustry(industry)"
            [ngClass]="{'select': (selectedIndustry && industry.Name == selectedIndustry.Name)}">
            <div class="vin-number">{{industry.Id}}</div>
            <div class="industry-brand">{{industry.Name}}</div>
            <div class="industry-warning warning-{{industry.Warning}}">
              <i class="fa fa-exclamation-triangle warning-message" *ngIf="industry.Message != null"
                pTooltip="{{industry.Message}}" tooltipPosition="top" tooltipZIndex="1100"></i>
              <span class="">{{industry.Warning}}</span>
              <i class="fa fa-check selected-icon"
                *ngIf="(selectedIndustry && industry.Name == selectedIndustry.Name)"></i>
            </div>
          </div>
          </td>
      </tr>
  </ng-template>
  </p-table>
  <div class="clearfix">&nbsp;</div>
  <div class="float-right">
    <button type="button" class="btn secondary-btn m-r-16"
      (click)="closeIndustryModal()">{{'Instance.Cancel' | translate}}</button>
    <button type="button" class="btn btn-primary primary-btn"
      (click)="saveIndustry()">{{'Instance.Save' | translate}}</button>
  </div>
</div>
</ng-template>

And I am trying to access the data table using the following way.

   @ViewChild('dt') dataveiw: BsModalRef;

But when I console dataveiw it shows undefined.

Answer 1

When using ViewChild you need to add template reference variable something like this using #dt

<ng-template #dt pTemplate="caption"></ng-template>

Because you are define reference name dt in your code

@ViewChild('dt') dataveiw: BsModalRef;