处理按钮单击时的角度错误

Question

I have an angular table in the front end with a delete button in it that onClick will delete the row, connected to ColdFusion backend.

If in a scenario the table page loads as usual, but right before the user clicks the delete button, the api goes down

How can I throw an error so it doesn't continue then on to the next page?

Answer 1

Return an error code value from your delete() function. Let's say 0 if everything went ok and 1 or any number if something went wrong.

You can also add a timeout after which you consider that there is an error.

Answer 2

I'm going show an example here how you can display an error to the user instead of doing what you are supposed to do, on a button click, which is connected to http call.

Stackblitz Demo

component:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';

  logs: string[] = [];

  errorFetch: boolean = false;

  constructor(private http: HttpClient) { }

  onClick(event) {
    this.http.get("https://weather.cit.api.here.com/weather/1.0/report.json?product=forecast_7days_simple&latitude=" + "&longitude=" + "&app_id=" + "&app_code=" + "jsonpCallback")
        .subscribe(result => {
            // if everything goes well do what you want here
            console.log("success getting weather results");
          },
          (err) => {
            //if the back end is down
            //error getting data
            //set a flag to show an error
            this.errorFetch = true;

            //here click on the button click me, to see the result
            //because the weather api is not responding you get to this block
            //of code
          },
          () => {
            //subscribe has finished
          }         
        );
  }
}

template:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<button (click)="onClick($event)">click me</button>

<div *ngIf="errorFetch" style="color:red;"> error getting weather data</div>

just click on the button click me and since there is an error getting the data, you can do something else in this case rather the deleting, in the appropriate block of code.