Угловые двусторонние данные, привязывающие начальную и конечную временную метку - PullRequest
Новая
       30

Угловые двусторонние данные, привязывающие начальную и конечную временную метку

0 голосов
/ 04 апреля 2019

Я настраиваю диалоговое окно для сотрудника, чтобы выбрать начальное и конечное время его работы, используя Amazing Time Picker (https://www.npmjs.com/package/amazing-time-picker). Я настроил два входных тега с двусторонней привязкой. Когдапользователь выбирает второй раз, другой элемент изменяется. Например, я выбираю 8:00 в качестве моего времени начала, затем выбираю 12:00 в качестве моего конечного времени. Когда я выбираю 12:00, время начала меняется на 12:00 вместо того, чтобы оставаться в 8:00.

Помимо того, что я ничего не нашел в своих поисках в Google по поводу двухсторонней привязки данных, затрагивающей несколько полей, я перепутал с изменением свойств. Я не пошел слишком далеко по этому пути, потому что это потребовало бы от меня изменения нескольких компонентов.Я хотел бы узнать, нужно ли мне это делать, но я сначала хотел получить подтверждение. 

// 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;

Я хочу, чтобы конечный пользователь выбрал время начала и окончания, а не менять друг друга. Я планирую захватитьэти временные метки и помещая их в объект временной карты. Просто для справки, мой интерфейс сведений о временной карте яs ... 

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

Эти данные будут помещены в массив, а затем во временную карту сотрудника ... 

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

1 Ответ

0 голосов
/ 04 апреля 2019

Вы должны использовать две разные модели привязки.

ц 

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)


EDIT
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()>

ц 

calculate() {
  // get the diff
}
...