Обновление ViewChild для clr-datagrid в clr-wizard - PullRequest
0 голосов
/ 13 февраля 2019

Первая публикация здесь и в надежде получить какой-либо совет (не могу найти ничего, чтобы подтвердить, что это было сделано ранее).

В настоящее время у меня есть clr-wizard, который позволяет конечному пользователю перемещаться и выбирать опциидля операций восстановления ВМ.На последней странице у меня есть страница clr-wizard, которая содержит следующее:

  <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 нормально возвращает журнал консоли, и по элементам и строкам я вижу, что там есть данные, но ссылки на столбцы и ссылки на элементы все отображаются как неопределенные, дажехотя размер массива действителен, например, 3 элемента и значение displayName показывает неопределенное для каждого элемента в массиве.

Я подозреваю, что это связано с тем, что Datagrid заполняется во время работы мастера, а также имеет функцию onLoad для заполнения полей выбора.Я пытался использовать console.log для запуска обновления ViewChild, но выходные данные остаются неопределенными.

В идеале мне просто нужно иметь возможность прочитать содержимое Datagrid и сохранить его, чтобы я мог добавить егок полезной нагрузке API POST.

Буду признателен за любую помощь!

1 Ответ

0 голосов
/ 30 июня 2019

Это на самом деле известная проблема с ясностью.Если вы хотите использовать сетку данных на модальной странице или странице мастера, сетка данных отображается неверно и высота = 0px.

Вот проблема с обходным решением

Просто установите height: auto !important на стиль Datagrid, и он будет отображен правильно.

...