Ъгловата избрана стойност при промяна не се актуализира

Когато select се промени, променете стойността на нещо друго, различно от избраното. Имам функция, при която само 4 типа елемент могат да бъдат избрани наведнъж, ако са избрани повече от 4, това променя стойността обратно до това, което беше преди промяната.

Моделът се актуализира с правилната стойност, но шаблонът не отразява промяната.

Шаблон – промених от (change) на (ngModelChange), след като прочетох Събитие за промяна на избора се случва преди ngModel да актуализира angulars github .

<tr *ngFor="let jobItem of job.jobItems">
    <td>
        <select 
            [disabled]="job.completed" 
            [(ngModel)]="jobItem.supplierType"
            (ngModelChange)="changeJobItemReplacementType(jobItem, $event)">
                <option *ngFor="let supplierType of supplierTypes" [ngValue]="supplierType">
                    {{ supplierType }}
                </option>
        </select>
    </td>
</tr>

Събитие

changeJobItemReplacementType(jobItem: JobItem, supplierType: string) {
        // THIS IS UPDATING BUT NOT REFLECTING IN TEMPLATE
        jobItem.supplierType = jobItem.originalValues.supplierType;
    }
}

typescript javascript angular html angular6
person Bankzilla    schedule 22.01.2020    source източник
comment
Бихте ли публикували работата си в stackblitz.com?   -  person The KNVB    schedule 23.01.2020
comment
@TheKNVB ето груба настройка на кода - stackblitz.com/edit/angular-e3macv   -  person Bankzilla    schedule 23.01.2020
comment
changeJobItemReplacementType(jobItem, $event) очаква два параметъра, като вторият не е събитието за промяна.   -  person Tom Shaw    schedule 23.01.2020
comment
@TomShaw $event е новата стойност на модела   -  person Bankzilla    schedule 23.01.2020

Отговори (1)


arrow_upward
1
arrow_downward

Играх с вашата настройка на stackblitz. Накарах го да работи, като добавих setTimeout като този:

changeJobItemReplacementType(jobItem: JobItem, supplierType: string) {
  console.log('changed value to: ', supplierType)
  console.log('jobItem current: ', jobItem)
  setTimeout(() => {
    jobItem.supplierType = jobItem.originalValues.supplierType;
    console.log('jobItem.supplieType modified back to original: ',jobItem)
  });
}
person Stratubas    schedule 23.01.2020