Проблема с изменением обработки ошибок в вызове API

Question

Я довольно новичок в Angular, но не в разработке в целом. Делаю личный проект, чтобы попытаться изучить возможности Angular, и я пытаюсь обработать вызов API для активного изменения HTML-кода. Ниже у меня есть пример моего кода. Я звоню в API покемонов и показываю основную информацию прямо сейчас, все, что я пытаюсь сделать, это сделать так, чтобы страница отображалась не найденной, если ответ возвращает ошибку. Я просто не знаю лучший способ справиться с этим в Angular, и любая помощь приветствуется.

Для большей ясности я смог получить сообщение об ошибке, проблема в том, что я не думаю, что она будет работать правильно, пока я не откажусь, и я точно не знаю, когда это сделать.

По заказу: https://stackblitz.com/edit/angular-hwchtb

Pokemon.Component.HTML
<div class="container-fluid" style="text-align: center">

    Pokemon Name:<input type="text" [(ngModel)]="Pokemon">

<button (click)="searchForPokemon()">Search</button>
<div *ngIf="response;else noresponse">
    <p>Name: {{response?.name}}</p>
    Possible Abilities:
    <ul>
    <li *ngFor="let a of response?.abilities">{{a.ability.name}}</li>
    </ul>
    Learnable Moves:
    <ul>
    <li *ngFor="let m of  response?.moves">{{m.move.name}}</li>
    </ul>
</div>

<ng-template #noresponse><h3>No Pokemon of that name found</h3></ng-template>
</div>

Pokemon.Component.TS

export class PokemonComponent implements OnInit {
  Pokemon: string = "";
  response: any;
  error: any;
  constructor(private http: HttpClient){
  }
  searchForPokemon(value:string){
    this.http.get('https://pokeapi.co/api/v2/pokemon/' + 
    this.Pokemon.toLowerCase())
    .subscribe(
      (response)=> this.response = response,
      (err) => this.error = err)          
  }

Answer 1

Измените свой HTML-код на это:

<div *ngIf="response && !(error && error.length>0)">
    <p>Name: {{response?.name}}</p>
    Possible Abilities:
    <ul>
        <li *ngFor="let a of response?.abilities">{{a.ability.name}}</li>
    </ul>
    Learnable Moves:
    <ul>
        <li *ngFor="let m of  response?.moves">{{m.move.name}}</li>
    </ul>
</div>
<div *ngIf="error && error.length>0" #noresponse><h3>No Pokemon of that name found</h3></div>
</div>

В вашем файле TS:

Pokemon: string = "";
  response: any;
  error:string="";
  constructor(private http: HttpClient){
  }
  searchForPokemon(value:string){
    this.error='';
    this.http.get('https://pokeapi.co/api/v2/pokemon/' + this.Pokemon.toLowerCase())
    .subscribe(
      (response)=> {this.response = response},
      (err) => this.error = err.message)          
  }

Здесь работает демо