Как мы можем остановить перезагрузку угловой страницы, если api выдает ошибку и вместо этого отображает эту ошибку - PullRequest
Новая
       18

Как мы можем остановить перезагрузку угловой страницы, если api выдает ошибку и вместо этого отображает эту ошибку

0 голосов
/ 11 октября 2019

У меня есть проблема в моем угловом приложении: если какой-либо API выдает какую-либо ошибку, приложение автоматически перезагружается один раз вместо отображения этой ошибки. Поэтому, пожалуйста, помогите мне остановить перезагрузку приложения и отобразить только эту ошибку

Я пробовал следующий приведенный ниже код, но он не мог работать, он снова выдает ошибку 

 onSubmit() {
          var  data = {
            encrypted_key : this.userId
            }
        this.userService.signup(data)
            .pipe(first())
            .subscribe(
                data => {
                    this.data=data
                },
                error => {
                  this.displayerror = error;

                });
    } 
This is .ts file

<button (click)="onSubmit()">Submit<button>
 HTML file
<p>{{displayerror}}</p>

Ожидаемый результат:

Отображать только ошибку

Actulaрезультат: перезагрузит всю страницу и снова отобразит кнопку

Ответы [ 3 ]

0 голосов
/ 11 октября 2019

В html передайте объект $ event, чтобы вы могли остановить его внутри дескриптора. 

<button (ngSubmit)="onSubmit()">Submit<button>
 HTML file
<p>{{displayerror}}</p>

внутри вашей функции onSubmit, просто предотвратите его. 

onSubmit(event) {
event.preventDefault();
}

используйте (ngSubmit) вместо(нажмите)

0 голосов
/ 11 октября 2019

Вы можете return false при получении ошибки от API 

onSubmit() {
      var  data = {
        encrypted_key : this.userId
        }
    this.userService.signup(data)
        .pipe(first())
        .subscribe(
            data => {
                this.data=data
            },
            error => {
              this.displayerror = error;
              return false;
            });
}
0 голосов
/ 11 октября 2019

Если в onSubmit есть ошибка, она будет обновлена. Поэтому убедитесь, что вы импортировали FormsModule и ReactiveFormsModule ** из ** @ angular / forms в соответствующие module.ts или app.module.ts

Также проверьте пример https://stackblitz.com/edit/angular-yghuby

Также вы можете использовать ngForm derictive 

<form  #createForm="ngForm" class="login-form text-center" (ngSubmit)="Update()" (keydown.enter)

app.module.ts 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
...