The problem here is you were binding both the input boxes with same variable (pickerData)
.(这里的问题是您用相同的变量(pickerData)将两个输入框绑定(在一起) 。) So, even if you change any one of them, the change will be reflected for both the values.(因此,即使您更改其中任何一个,更改也会反映在两个值上。) Since you have two textboxes you need two variables to store their values, like (pickerData1) and (pickerData2) .(由于您有两个文本框,因此需要两个变量来存储它们的值,例如(pickerData1)和(pickerData2) 。)
While calling the (initPicker()) you need to pass one more parameter i,e in which textbox the datepicker is currently being opened and store the date in that respective variable.(在调用(initPicker()时,)您需要传递一个参数,即当前正在打开日期选择器的文本框,并将日期存储在相应的变量中。)
Html code(HTML代码)
<input type="text" [(ngModel)]="pickerData1" (focus)="initPicker($event, 1)" id="f-1" />
<input type="text" [(ngModel)]="pickerData2" (focus)="initPicker($event, 2)" id="f-2" />
TS code(TS码)
initPicker = (event, index) => {
this.timepicks.clear();
let pickerComponentFactory =
this._componentFactoryResolver.resolveComponentFactory(TimepickComponent);
//Dynamically creating the ' TimepickComponent ' component
let pickerComponentRef = this.timepicks.createComponent(pickerComponentFactory);
(<TimepickComponent>(pickerComponentRef.instance)).pickerId = event.target.id; // Passing id
pickerComponentRef.instance.pickData.subscribe(res => {
if (index === 1)
this.pickerData1 = res;
elseif (index === 2)
this.pickerData2 = res;
pickerComponentRef.destroy();
});
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…