使用 ngmodel(角度 8)填充选择下拉列表中的值

Question

我有两个下拉列表，开始时间和结束时间，第一个下拉列表使用时间数组，其中选择了时间，然后使用此时间的索引进行切片，并为第二个下拉列表制作数组。因此，结束时间始终大于开始时间。

在这里，我尝试在单击提交按钮时设置默认值，但是当我单击提交按钮时，我是

1. 没有得到设置的开始时间 vale，它显示为空白和
2. 在下拉列表中获取结束时间值，但下拉列表值数组也显示小于开始时间的时间值。

模板

Start at:
<select
[(ngModel)]="time1"
(change)="onSelect($event.target.value)"   id="fTime">
<option value="0" selected>Select</option>
<option  [value]="i" *ngFor="let type of startTimeArray; let i = index">
{{type}}
</option>
</select>
End at:
<select 
[(ngModel)]="time2"
id="tTime">
<option value="0" selected>Select</option>
<option [value]="type" *ngFor="let type of tempEndTimeArray">
{{type}}
</option>
</select>

<div><button   (click)="submit()">click</button></div>

TS

import { Component } from "@angular/core";
import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
forTableArray: any = [];
time1:any=[];
time2:any=[];
startTimeArray:any=["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];
endTimeArray:any=["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];
public tempEndTimeArray: Array<any>;
public enableEndTime: boolean = true;
submit(){
this.time1="";
this.time2="";
this.tempEndTimeArray =this.startTimeArray;
this.time1="7:00 AM";
this.time2="5:00 PM";
}
public onSelect(val){
console.log(val)
let index = parseInt(val) + 1;
console.log(index)
this.tempEndTimeArray = this.endTimeArray.slice(index);
}
convertTime12to24(time12h) {
const [time, modifier] = time12h.split(" ");
let [hours, minutes] = time.split(":");
if (hours === "12") {
hours = "00";
}
if (modifier === "PM") {
hours = parseInt(hours, 10) + 12;
}
return `${hours}:${minutes}`;
}
}

除此之外，我无法在我的控制台中获取选定的时间值，例如，如果从下拉列表中选择了 01：00 PM，我希望它显示在控制台中，而是我正在获取索引值(因为我在我的 html 选择下拉列表中设置了 [value]= i，以便我可以将切片用于时间)

https://stackblitz.com/edit/angular-r2sv3k

Answer 1

您有几个问题。我将向您展示我的代码版本并描述我所做的工作，而不是单独详细介绍它们。

组件.html

Start at:
<select [(ngModel)]="time1" (ngModelChange)="onTime1Change()">
<option [ngValue]="-1">Select</option>
<option  [ngValue]="i" *ngFor="let time of startTimes; let i = index">
{{time}}
</option>
</select>
End at:
<select [(ngModel)]="time2">
<option [ngValue]="-1">Select</option>
<option [ngValue]="i" *ngFor="let time of endTimes let i = index">
{{time}}
</option>
</select>

在 HTML 中，我使用[ngValue]来绑定选项值而不是[value].[ngValue]绑定值本身，而[value]始终使用字符串表示形式。您希望使用索引作为选项值(数字)，因此应使用[ngValue]。

此外，我对占位符选项使用值 -1。这是为了避免Select和数组中的第一个项目发生冲突。

因为您使用的是[(ngModel)]，所以可以使用(ngModelChange)来检测值更改。由于使用的是双向绑定，因此无需将值传递给事件处理程序 - 模型已更新。

组件.ts

time1 = -1;
time2 = -1;
startTimes = ["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",
"1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];    
endTimes: string[];
ngOnInit() {
this.endTimes = this.startTimes.slice();
}
onTime1Change() {
if (this.startTimes.indexOf(this.endTimes[this.time2]) <= this.time1) {
this.time2 = -1;
}
let sliceIndex;
if (this.time1 >= 0) {
sliceIndex = this.time1 + 1;
}
this.endTimes = this.startTimes.slice(sliceIndex);
}

time1和time2绑定到<select>字段，因此它们的数据类型应与<option>值类型匹配。我将它们初始化为 -1 以允许Select显示为默认选择。

不需要endTimeArray和tempEndTimeArray- 您可以随时从startTimeArray中获取副本.我还声明了它们正确的数据类型。我正在ngOnInit()初始化endTimeArray.

onTime1Change()在这里做所有繁重的工作。它执行以下操作：

1. 如果time2<=time1，则重置time2。请记住，endTimes可能是一个切片，因此您必须在startTimes中找到 time2 值的原始索引。

2. 设置切片索引(如果time1有值)

3. 设置endTimes

演示：https://stackblitz.com/edit/angular-sae1jr

Answer 2

我的解决方案，重新思考您的设计

app.component.ts

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
public startDate: Date;
public endDate: Date;
public readonly availableDates: Date[] = [
new Date(2020, 4, 13, 10),
new Date(2020, 4, 13, 11),
new Date(2020, 4, 13, 12),
new Date(2020, 4, 13, 13),
new Date(2020, 4, 13, 14),
new Date(2020, 4, 13, 15),
];
get availableEndDates() {
if(this.startDate == undefined) return[];
const timeStampStart = new Date(this.startDate).getTime();
return this.availableDates.filter(d =>  {
const timeStampEnd = new Date(d).getTime();
return timeStampStart < timeStampEnd;
});
}
public submit() {
if(this.startDate == undefined) this.startDate = this.availableDates[0]
}

}

app.component.html

Start at:
<select [(ngModel)]="startDate">
<option [value]="undefined">No date selected</option> 
<option [value]="date" *ngFor="let date of availableDates">
{{date | date:'hh:mm aaaa'}}
</option>
</select>
End at:
<select [(ngModel)]="endDate" [disabled]="startDate == undefined">
<option [value]="undefined">No date selected</option> 
<option [value]="date" *ngFor="let date of availableEndDates">
{{date | date:'hh:mm aaaa'}}
</option>
</select>
<button (click)="submit()">click</button>