Как остановить спиннер с сообщением об ошибке, если есть ошибка сервера - PullRequest
Новая
       6

Как остановить спиннер с сообщением об ошибке, если есть ошибка сервера

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

У меня angular 8 заявка.

И я хочу показать сообщение об ошибке при возникновении ошибки вызова API.

Итак, у меня есть компонент, в который будет загружена общая ошибка c. А в другом компоненте вы можете вызвать этот метод. Но сообщение об ошибке не будет отображаться, и спиннер не исчезнет go, если будет ошибка вызова API. Таким образом, счетчик будет показан бесконечным

Так что это универсальный c компонент: 

export class IsLoadingComponent implements OnInit {
  @Input() message: string;
  @Input() showSpinner = true;
  showError = false;

  public text: string;

  constructor() {}

  ngOnInit() {
    this.text = this.message + '...';
  }

  displayLoadErrorMessage( msg: string ) {
    this.text = msg;
    this.showSpinner = false;
    this.showError = true;
  }
}

, и это компонент, где я вызываю сообщение об ошибке: 

export class DashboardComponent implements OnInit, OnDestroy {

 error = null;
isLoading: IsLoadingComponent;

 this.user$.pipe(switchMap(({ profile }) => this.indicatorService.get('profile.participant'))).subscribe(
      (i: any) => {
        this.setFavIndicators(i);
      },
     error => {

      this.error = true;


        setTimeout(() => {
           this.handleSubmitError('Indicatoren kunnen niet worden geladen!!');
        }, 500);
      }

    );
}

  handleSubmitError(msg: string) {
    this.isLoading.displayLoadErrorMessage(msg);
  }

А это шаблон Dashboard: 

 <app-is-loading *ngIf="!favIndicatorsLoaded && !error" message="Indicatoren worden geladen" class="darkgrey"></app-is-loading>

     <p *ngIf="error" >
      <app-is-loading   showSpinner = false class="darkgrey"  >
      </app-is-loading>
    </p>

Но, так как счетчик еще работает, а сообщение не отображается.

Так что я должен изменить?

Спасибо тебе

Да, но если я сделаю это: 

 setTimeout(() => {
           this.handleSubmitError('Indicatoren kunnen niet worden geladen!!');
        }, 500);

Тогда сообщение не будет показано.

Но если я сделаю это: 

 <p *ngIf="error" >
      <app-is-loading   [showSpinner] = false message="Indicatoren kunnen niet worden geladen" class="darkgrey"  >
      </app-is-loading>
    </p>

Тогда будет показано сообщение. Но сейчас это в два раза. Потому что handleSubmitError ожидает сообщения.

Это я до сих пор не понимаю.

1 Ответ

1 голос
/ 04 апреля 2020

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

Пытался смоделировать то, что вы хотите выполнить sh. И это то, что я придумываю, используя привязку ввода.

шаблоны панели инструментов: 

<app-is-loading *ngIf="showSpinner && !msg" [showSpinner]="showSpinner"</app-is-loading>
<app-is-loading *ngIf="!showSpinner" [errorMessage]="msg"></app-is-loading>

панель инструментов ts: 

// declared variable
showSpinner: boolean;
msg = '';

// inside http request, showSpinner set to true
this.showSpinner = true;

// inside http request error block/function
setTimeout(() => {
    this.showSpinner = false; // showSpinner set to false
    this.msg = 'Indicatoren kunnen niet worden geladen!!';
}, 500);

Generi c шаблон компонента 

<p *ngIf="showSpinner">Spinner</p>
<p *ngIf="!showSpinner">{{ errorMessage }}</p>

Generi c файл компонента ts внутри класса 

@Input() showSpinner: boolean;
@Input() errorMessage: string;
...