[英]Populating values in select dropdowns using ngmodel, angular 8
I have two dropdowns,start time and end time, the first dropdown uses a time array, where time is selected, and then index of this time is used to slice, and array is made for the second dropdown.我有两个下拉列表,开始时间和结束时间,第一个下拉列表使用时间数组,其中选择时间,然后使用该时间的索引进行切片,并为第二个下拉列表制作数组。 So that end time is always greater than start time.
所以结束时间总是大于开始时间。
Here I am trying to set default values when the submit button is clicked, but when I click the submit button then I am在这里,我尝试在单击提交按钮时设置默认值,但是当我单击提交按钮时,我
template模板
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 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}`;
}
}
Apart from that I am not able to get selected time value in my console, example if 01:00 PM is selected from the dropdown, I want it to display in the console, instead I am getting index value(as I have set [value]= i, in my html select dropdown, so that i can use slice for time)除此之外,我无法在控制台中获取选定的时间值,例如,如果从下拉列表中选择了 01:00 PM,我希望它显示在控制台中,而不是获取索引值(因为我已设置 [value ]= i,在我的 html select 下拉列表中,这样我就可以使用切片来获取时间)
https://stackblitz.com/edit/angular-r2sv3k https://stackblitz.com/edit/angular-r2sv3k
You have a few issues.你有几个问题。 Instead of detailing them individually, I will show you my version of your code and describe what I have done.
我不会单独详细说明它们,而是向您展示我的代码版本并描述我所做的事情。
component.html组件.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>
In the HTML, I am using [ngValue]
to bind option values instead of [value]
.在 HTML 中,我使用
[ngValue]
而不是[value]
] 来绑定选项值。 [ngValue]
binds the value itself, whereas [value]
always uses the string representation. [ngValue]
绑定值本身,而[value]
始终使用字符串表示。 You want to use the index as the option values (a number), so should use [ngValue]
.您想将索引用作选项值(数字),因此应使用
[ngValue]
。
Also, I am using a value of -1 for the placeholder option.另外,我将值 -1 用于占位符选项。 This is to avoid a clash between
Select
and the first item in the array.这是为了避免
Select
和数组中的第一项之间的冲突。
Because you are using [(ngModel)]
, you can use (ngModelChange)
to detect value changes.因为您使用的是
[(ngModel)]
,所以您可以使用(ngModelChange)
来检测值的变化。 And because you are using two-way binding, you don't need to pass the value to the event handler - the model has already been updated.而且因为您使用的是双向绑定,所以您不需要将值传递给事件处理程序 - model 已经更新。
component.ts组件.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
and time2
are being bound to the <select>
fields, and so their data type should match the <option>
value types. time1
和time2
被绑定到<select>
字段,因此它们的数据类型应该与<option>
值类型匹配。 I am initialising them to -1 to allow Select
to appear selected as default.我将它们初始化为 -1 以允许
Select
显示为默认选择。
There is no need for an endTimeArray
and tempEndTimeArray
- you can always take a copy from the startTimeArray
.不需要
endTimeArray
和tempEndTimeArray
- 您始终可以从startTimeArray
获取副本。 I have also declared their correct data types.我还声明了它们正确的数据类型。 I am initialising
endTimeArray
in ngOnInit()
.我在
ngOnInit()
中初始化endTimeArray
。
onTime1Change()
is doing all of the heavy lifting here. onTime1Change()
在这里完成了所有繁重的工作。 It performs the following actions:它执行以下操作:
Reset time2
if time2
<= time1
.如果
time2
<= time1
则重置time2
。 Remember that the endTimes
may be a slice, so you have to find the original index of the time2 value in startTimes
.请记住,
endTimes
可能是一个切片,因此您必须在startTimes
中找到 time2 值的原始索引。
Set the slice index if time1
has a value如果
time1
有值,则设置切片索引
Set endTimes
设置
endTimes
DEMO: https://stackblitz.com/edit/angular-sae1jr演示: https://stackblitz.com/edit/angular-sae1jr
My solution, rethink your design我的解决方案,重新考虑你的设计
app.component.ts 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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.