Angular 双向数据绑定开始和结束时间戳

Question

我正在为员工设置一个对话框，以使用惊人的时间选择器 (https://www.npmjs.com/package/amazing-time-picker) 选择他们工作的开始和结束时间。我已经设置了两个带有双向绑定的输入标签。当用户第二次选择时，另一个元素发生变化。例如，我选择上午 8 点作为开始时间，然后选择下午 12 点作为结束时间。当我选择中午 12 点时，开始时间更改为中​​午 12 点，而不是停留在上午 8 点。

除了在我的谷歌搜索中没有找到任何关于影响多个字段的双向数据绑定的内容之外，我还搞砸了更改属性。我没有在这条路上走得太远，因为它需要我更改多个组件。我想知道我是否必须这样做，但我想先确认一下。

// Here are the start and stop input tags...
<input name="startTime" id="startTime" class="form-control" atp-time- 
picker type="time" [(ngModel)]="timestamp.date">
<input name="stopTime" id="stopTime" class="form-control" atp-time-picker type="time" [(ngModel)]="timestamp.date">

//The timestamp interface is just... 
public date: Date;

我希望最终用户选择开始和停止时间，而不是让它们相互更改。我计划捕获这些时间戳并将它们放入时间卡对象中。仅供参考，我的考勤卡详情界面是...

...
 public timestamps: Array<Timestamp>;
...
 public constructor() {
     this.timestamps = new Array<Timestamp>();
 }

这些详细信息将被放入一个数组中，然后放入员工的考勤卡中......

...
 public timecardDets: Array<TimecardDet>;
...
 public constructor() {
     this.timecardDets = new Array<TimecardDet>();
 }

Answer 1

您应该使用两种不同的模型绑定。

ts：

startTime: Timestamp;
stopTime: Timestamp;

html:

<input name="startTime" id="startTime" class="form-control" atp-time-picker type="time" [(ngModel)]="startTime">
<input name="stopTime" id="stopTime" class="form-control" atp-time-picker type="time" [(ngModel)]="stopTime">

因此，当您导出日期时，您可以将它们放入数组中，或者在 (change) 方法中更改时设置它们


编辑
html:

<input name="startTime" id="startTime" class="form-control" atp-time-picker type="time" [(ngModel)]="date[0]" (change)=calculate()>
<input name="stopTime" id="stopTime" class="form-control" atp-time-picker type="time" [(ngModel)]="date[1]" (change)=calculate()>

ts：

calculate() {
  // get the diff
}