从Angular中的选择选项更改值

Question

我想要完成的是当StartHour的值被更改时（当startHour高于EndHour的值时）EndHour Value必须更改为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都是假的，我也知道我把所有小时都作为字符串而不是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);
    }

Answer 1

HTML文件更改

在两个select元素中添加ngModel。

例如：

开始时间选择：<select id="starthour" .... [(ngModel)]="startHour">

结束时间选择：<select id="endHour" .... [(ngModel)]="endHour">

TS文件更改

在onSelectStartHour()方法中添加条件代码并更改endHours值。