Как обновить sh компонент в angular?

Question

Привет, я новичок в angular, и я хочу обновить sh компонент после добавления нового набора URL API после события click в кнопке, это мой код. pokemons.service.ts

export class PokemonsService {

  private _url: string = "https://pokeapi.co/api/v2/pokemon";
  private _pokemonUrl: string;

  constructor(private http : HttpClient) { }

  setUrl(value: string){
    this._url = value;
  }

  getUrl(): Observable<IPokemon[]>{
    return this.http.get<IPokemon[]>(this._url);
  }

  setPokemonUrl(value: string){
    this._pokemonUrl = value;
  }

  getPokemonsUrl(): Observable<IPokemonDetails[]>{
    return this.http.get<IPokemonDetails[]>(this._pokemonUrl);
  }

}

pokemon-search.component.ts

    export class PokemonSearchComponent implements OnInit {
  pokemons = [];
  pokemonUrl: string;
  constructor(private _pokemons : PokemonsService) { }

  ngOnInit(){
    this._pokemons.getUrl().subscribe(data => {
      console.log(data);
      this.pokemons = data;
    });
  }

  sendPokemonUrlToService(value: string){
    this._pokemons.setPokemonUrl(value);
  }

  onClick(url){
    this._pokemons.setPokemonUrl(url);
    console.log(this._pokemons);
  }

  onClickNextPokemon(url){
    this._pokemons.setUrl(url);
    console.log(this._pokemons);
  }
}

pokemon-search.component. html

    <ul *ngFor="let pokemon of pokemons.results">
    <li><button (click)="onClick(pokemon.url)">{{pokemon.name}}</button></li>
</ul>
<button (click)="onClickNextPokemon(pokemons.previous)">PREVIOUS</button>
<button (click)="onClickNextPokemon(pokemons.next)">NEXT</button>

спасибо много заранее

Answer 1

Как правило, ваш пользовательский интерфейс должен обновляться при изменении данных. Если вы используете changeDetection: ChangeDetectionStrategy.OnPush в качестве стратегии обнаружения изменений и ваши данные не отражены в вашем пользовательском интерфейсе, вы можете использовать метку для проверки, как показано ниже

 constructor(private _pokemons : PokemonsService,  
             private _changeDetectorRef: ChangeDetectorRef) { }

  ngOnInit(){
    this._pokemons.getUrl().subscribe(data => {
      console.log(data);
      this.pokemons = data;
      this._changeDetectorRef.markForCheck();
    });
  }

, чтобы убедиться, что ваши данные доступны this._pokemons.getUrl() в этом вызове метода.

---

добавьте * ngFor, как показано ниже. Вы должны l oop li вместо ul

<ul>
  <li *ngFor="let pokemon of pokemons.results">
    <button (click)="onClick(pokemon.url)">{{pokemon.name}}</button>
  </li>
</ul>