Изменить значение из опции выбора в угловых - PullRequest
0 голосов
/ 28 февраля 2019

Что я хочу сделать, это когда значение StartHour изменяется (когда startHour больше значения из EndHour) Значение EndHour должно измениться на StartHour плюс один час.

<div class="startHourSelection">
    <label *ngIf="startHourSelection">Begin uur</label>
        <div *ngIf="startHourSelection" class="select">    
            <select id="starthour" (change)="onSelectStartHour($event.target.value)" [disabled]="parentIsLoading">
                <option
                    *ngFor="let Hour of startHours; let i = index"
                    value="{{Hour}}"
                    [attr.selected]="i == 0 ? true : null">
                    {{Hour}}
                </option>
            </select>
        </div>
</div>
<div class="endHourSelection">
    <label *ngIf="endHourSelection">Eind uur</label>
        <div *ngIf="endHourSelection" class="select"> 
            <select id="endHour" (change)="onSelectEndHour($event.target.value)" [disabled]="parentIsLoading">
                <option
                    *ngFor="let Hour of endHours; let i = index"
                    value="{{Hour}}"
                    [attr.selected]="i == 0 ? true : null">
                    {{Hour}}
                </option>
            </select>
        </div>
</div>

Компонент:

Значение @Input обоих значений равно false, я также знаю, что у меня все часы в виде строк вместо DATE. Я не уверен, что мне нужно преобразовать его

@Output() selectStartHour = new EventEmitter<string>(); // when a strathour is selected
@Output() selectEndHour = new EventEmitter<string>(); // when a strathour is selected

startHours = [
    '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00',
    '13:00', '14:00',  '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
];

endHours = [
    '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00',
    '13:00', '14:00',  '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'

];

onSelectStartHour(startHour: string) {
        this.selectStartHour.emit(startHour);
    }

    onSelectEndHour(endHour: string) {
        this.selectEndHour.emit(endHour);
    }

1 Ответ

0 голосов
/ 28 февраля 2019

Изменения в HTML-файле

Добавление ngModel в оба выбранных элемента.

Пример:

Выбор часов начала: <select id="starthour" .... [(ngModel)]="startHour">

Конечные часы выбирают: <select id="endHour" .... [(ngModel)]="endHour">

Изменения файлов TS

добавить код условия в методе onSelectStartHour() и изменить значение endHours.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...