Как получить разницу в данное время и текущее время в машинописи

Question

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

Я попробовал ниже логику

 getTimeDiff(time, date)
    {

         const dateNow = new Date()
         const slotDate = new Date(`${date} ${time}`);  // say time = '10:30:00' and date = '2018-11-14' 

         const diff = Math.abs(Math.abs(dateNow.getTime() - slotDate.getTime()) /  3600000)

        //if diff is not negative
       if(diff) {
         return false
      } 
        else {
         return true
       }
     }

HTML

<span *ngIf="getTimeDiff(result.endtime, result.date)"> open </span>

Обновление

Элементы отображаются с использованием * ngFor, поэтому я не могу вызвать getTimeDiff в ngOnInit ().

<div *ngFor="let result of results">
    <span *ngIf="getTimeDiff(result.endtime, result.date)"> open </span>
</div>

но по какой-то причине я получаю:

ViewAppointmentsComponent.html: 30 Ошибка: ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после того как это было проверено. Предыдущее значение: 'null: 6.0732225'. Текущий значение: 'null: 6.0732252777777775'.

Answer 1

Это ошибка жизненного цикла, говоря, что Angular уже проверил значение, но вы по какой-то причине обновляете его.

Если вы добавите консольный журнал в свою функцию, вы увидите, что он называется A LOT времени.

Это потому, что функции, связанные с директивами, вызываются при каждом взаимодействии с пользователем.

Это означает, что каждый раз, когда он вызывается, он получает новое значение даты (+1 мс)

Чтобы избежать этого, создайте свою дату при создании компонента и сравните ее.При желании вы можете обновить его некоторое время, но не в самой функции.

constructor(private now = new Date()) {}

getTimeDiff(time, date)
{
     const slotDate = new Date(`${date} ${time}`);  // say time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(this.now.getTime() - slotDate.getTime()) /  3600000)

    //if diff is not negative
   if(diff) {
     return false
  } 
    else {
     return true
   }
 }

РЕДАКТИРОВАТЬ

Чтобы избежать вызова вашей функции, вы можете использовать переменную, которая обновляется при изменении:

this.timeDiff: boolean;

ngDoCheck() {
  this.timeDiff(this.result.endtime, this.result.date);
}

getTimeDiff(time, date)
{
     const slotDate = new Date(`${date} ${time}`);  // say time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(this.now.getTime() - slotDate.getTime()) /  3600000)

    //if diff is not negative
   if(diff) {
     this.timeDiff = false;
  } 
    else {
     this.timeDiff =  true;
   }
 }

В вашем HTML

<span *ngIf="timeDiff"> open </span>

ngDoCheck - это ловушка жизненного цикла (например, ngOnInit), которую можно суммировать с помощью

Функция, которая обнаруживает изменения, которые не отслеживаются Angular

Answer 2

Angular запускает обнаружение изменений, и когда обнаруживается, что некоторые значения, переданные дочернему компоненту, были изменены, Angular выдает ошибку ExpressionChangedAfterItHasBeenCheckedError.

Лучше создать одну переменную для хранения информации, а не вызывать одну и ту же функцию при каждом обнаружении изменений

different = false;  //<-- hold the difference state.

getTimeDiff(time, date)
{

     const dateNow = new Date()
     const slotDate = new Date(`${date} ${time}`);  // say time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(dateNow.getTime() - slotDate.getTime()) /  3600000)

    //if diff is not negative
   if(diff) {
     this.different = false  //<-- change to false.
  } 
    else {
     this.different  = true  //<-- change to true.
   }
 }

HTML

<span *ngIf="different"> open </span>

Примечание: не забудьте вызвать функцию getTimeDiff в соответствующем месте, например, ngOnInit, если вы хотите получить один раз.