Сортировка таблицы угловых материалов с помощью formControl

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

<form [formGroup]="rackAverageForms[i]">
          <md-input-container>
            <input [formControl]="rackAverageForms[i].controls.rackAverage" #rackAverage
                   formControlName="rackAverage"
                   (keydown.tab)="validateRackAverage(rackAverage,i)" class="numeric-field" [numberOnly]="true"
                   mdInput value="{{row.chosenDateRackAverage | currency:'USD':true:'1.4-4'}}">
            <md-error><strong>{{formErrors[i].rackAverage}}</strong></md-error>
          </md-input-container>
</form>

Вот снимок экрана перед сортировкой: представление md-таблицы перед попыткой сортировки

Это после сортировки, и данные исчезли: представление md-таблицы после сортировки с отсутствующими данными

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


angular angular-material2 form-control
person reutbp    schedule 29.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробовав несколько разных вещей, переключился на использование уникального значения row.id для поиска элемента управления формы, который теперь работает. См. фиксированный html ниже:

       <form [formGroup]="rackAverageForms[row.id]">
          <ng-container *ngIf="row.chosenDateRackAverage > 0">
            <md-input-container>
              <input [formControl]="rackAverageForms[row.id].controls.rackAverage" #rackAverage
                     formControlName="rackAverage"
                     (keydown.tab)="validateRackAverage(rackAverage,row.id)" class="numeric-field" [numberOnly]="true"
                     mdInput value="{{row.chosenDateRackAverage | currency:'USD':true:'1.4-4'}}" >
              <md-error><strong>{{formErrors[row.id].rackAverage}}</strong></md-error>
            </md-input-container>
          </ng-container>
        </form>
person reutbp    schedule 31.08.2017