在 clr-wizard 中更新 clr-datagrid 的 ViewChild答案

【问题标题】：Updating ViewChild for clr-datagrid in clr-wizard在 clr-wizard 中更新 clr-datagrid 的 ViewChild
【发布时间】：2019-02-13 15:58:21
【问题描述】：

第一次在这里发帖，希望得到一些建议（找不到任何东西来确认之前已经做过）。

目前，我有 clr-wizard，它允许最终用户导航和选择 VM 还原操作的选项。在最后一页，我有一个 clr-wizard-page，其中包含以下内容：

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

困难在于从数据网格提交和访问数据；在我的打字稿中，我有以下内容：

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 可以很好地返回控制台日志，我可以从项目和行中看到那里有数据，但是列 refs 和 items refs 都显示为未定义，即使数组大小是有效的，例如3 个项目和 displayName 值显示数组中每个项目的未定义。

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

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

任何帮助将不胜感激！

【问题讨论】：

我不确定我是否理解您要执行的操作，您的控制器中已经有了项目列表，那么为什么需要解析行的内容？另外，您是否需要一个数据网格或者表格可以满足您的需求？
是的，对不起，数据在控制器中，但是当我查询行时，数组计数显示正确的对象数量（例如 array(5)），但是当我返回值时，我对每个项目都未定义（列名未定义，项目未定义）。就好像 viewchild 需要刷新后数据填充（不是 100% 确定这是否可能来自 clr-wizard）。附带说明一下，我已经测试了表格，我可以得到我需要的数据，所以我现在会运行它，如果我需要分页或过滤，我会回到数据网格。
您不应该尝试检查 DOM 的内容来管理您的数据模型。我仍然不明白为什么当您有数据网格输入绑定以了解正在显示的记录页面时，您为什么要尝试获取 DOM 数据。

标签： angular datagrid vmware-clarity

【解决方案1】：

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

Here is the issue with a workaround

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

【讨论】：