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

Question

我想獲取模態內部的表格元素，我在下面提供模態html代碼以及如何嘗試訪問數據表。 數據表是主要的

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

我正在嘗試使用以下方式訪問數據表。

   @ViewChild('dt') dataveiw: BsModalRef;

但是當我控制台dataveiw時，它顯示未定義。

Answer 1

當使用ViewChild您需要添加模板引用變量像這樣使用#dt

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

因為您在代碼中定義了引用名稱dt

@ViewChild('dt') dataveiw: BsModalRef;