Блог

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

Следующий код записывает оценку судьи в базу данных, а затем запрещает этому судье снова забивать, пока оценка не будет удалена из базы данных. Я хочу, чтобы под панелью судей появлялось сообщение, когда судья отправляет свой результат, что-то вроде «OK!». В настоящее время он появляется, когда устанавливается значение isLoading = true, но только очень кратко, потому что, как вы можете видеть из приведенного ниже кода, он превращается в false . Мне нужно, чтобы он автоматически превращался в false, но только через 3 или около того секунды.

 async send(): Promise<any> {
try {
  this.isLoading = true;
  const star: { isValid: boolean } = await this.judgeService.submitScoreIsValid(this.id).toPromise();
  if (star.isValid === true) {
    await this.judgeService.write(this.id, {score: this.currentScore}).toPromise();
    this.status = true;
  } else {
    this.status = false;
  }
} catch (e) {
  console.log(e);
} finally {
  this.isLoading = false;
}
}
  

Я хочу, чтобы isLoading равнялся true, но только примерно на 3 секунды. Как я могу это сделать?

Я пытался перейти:

 this.isLoading=true;    
$timeout(function(){ this.isLoading=false; }, 3000);
  

но это не сработало, оно просто остается и не исчезает через 3 секунды. Кто-нибудь может помочь?

Мой интерфейс таков:

 <div *ngIf="isLoading">
     <h5>OK!</h5>
</div>
  

* отредактировано, чтобы отразить изменения, внесенные по предложению одного из ответов ниже.

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

В любом случае, написанный вами код указывает angular установить isLoading значение true через 3 секунды, а не на 3 секунды. Что вам нужно сделать, это:

 $timeout(function() { this.isLoading = true; });
$timeout(function() { this.isLoading = false; }, 3000);
  

… то есть сначала установите для него значение true , а затем через 3 секунды установите для него значение false .

вам нужно сделать это:

 $timeout(() => this.isLoading = false, 3000);
  

функции, не являющиеся стрелками, создают новый this контекст, функции со стрелками сохраняют внешний this