在clr中更新clr-datagrid的ViewChild -向导

Question

第一次在这里发帖，希望得到一些建议(找不到任何东西来确认这是以前做过的)。

目前，我有clr向导，它允许最终用户导航并选择虚拟机恢复操作的选项。在最后一个页面上，我有一个clr向导页面，其中包含以下内容：

  <ng-template clrPageTitle>Export Options</ng-template>
    You have selected to recover <b>{{selectedVM[0].vm_name}}</b>. Please select your recovery options:
    <div class="form-group">   
      <div>
        <input type="radio" name="rad1" (click)= "changeValue(false,'noMapping')"> No Mapping
        <input type="radio" name="rad1" (click)= "changeValue(false,'deleteNics')"> Deleted NICs of all VMs
        <input type="radio" name="rad1" (click)= "changeValue(true, 'advanced')"> Advanced
      </div>
      <ng-container *ngIf="isValid; then exportadvanced;"></ng-container>
        <ng-template #exportadvanced>
          <clr-datagrid class="datagrid-compact" #datagridExportAdvanced >
            <clr-dg-column [clrDgField]="'rVM'">
              VM Name
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'rVMNicIndex'">
              NIC Index
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'rVMNetwork'">
              Network
            </clr-dg-column>
            <clr-dg-row *ngFor="let rvOption of this.rvOptionsVms">
              <clr-dg-cell>{{rvOption.name}}</clr-dg-cell>
              <clr-dg-cell>{{rvOption.nicIndex}}</clr-dg-cell>
              <clr-dg-cell>                              
                <select [(ngModel)]="vmnetwork">
                  <option *ngFor="let vmnetwork of this.rvOptionsNetworks" [value]="vmnetwork.name" [selected]="vmnetwork.name">
                  {{vmnetwork.name}}
                  </option>
                </select>
              </clr-dg-cell>
              </clr-dg-row>         
              <clr-dg-footer>
                {{paginationRec.firstItem + 1}} - {{paginationRec.lastItem + 1}} of {{paginationRec.totalItems}} VMs
               <clr-dg-pagination #paginationRec [clrDgPageSize]="10"></clr-dg-pagination>
              </clr-dg-footer>                 
            </clr-datagrid>
          </ng-template>      
          </div>
        </clr-wizard-page>

困难之处在于提交和访问来自datagrid的数据；在我的typescript中，我有以下几点：

export class ObjectComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {

    @ViewChild("datagridExportAdvanced") dgExportAdvanced: Datagrid;

    public exportOnSubmit(){

      console.log('Debug: Logging DG',this.datagridExportAdvanced);
      console.log(`Debug: Show DG Rows ${this.datagridExportAdvanced.rows}`);

    }
}

Datagrid可以很好地返回控制台日志，我可以从项目和行中看到那里有数据，但列引用和项目引用都显示为未定义，即使数组大小有效，例如3个项目和displayName值显示未定义的数组中的每个项目。

我怀疑这是由于Datagrid在向导期间被填充，并且还有一个onLoad函数来填充选择框。我尝试使用console.log来触发ViewChild的更新，但输出仍未定义。

理想情况下，我只需要能够读取Datagrid的内容并存储它，这样我就可以将它添加到API POST有效负载中。

任何帮助都将不胜感激！

Answer 1

这实际上是一个清晰的已知问题。如果您想在Modal或向导页面中使用Datagrid，则Datagrid将呈现为不正确且高度= 0px。

Here is the issue with a workaround

只需将height: auto !important设置为Datagrid样式，它就会正确呈现。