Невозможно получить / [объект% 20Object]

Question

Я мирно извлекал все из API покемонов, объявив эту строку в файле с активами следующим образом:

export const configUrl = {
  pokemonBaseUrl: 'https://pokeapi.co/api/v2/',
};

И вызвав ее в моем сервисе так:

  getPokemons(offset: number): Observable<any> {
    return this.httpClient.get(`${configUrl.pokemonBaseUrl}pokemon-species?offset=${offset}&limit=20`)
      .pipe(
        map((pokemonList: PokemonList) => this.addAdditionalPropertiesToEntity(pokemonList))
      );
  }

затемвызывая его внутри побочных эффектов:

  @Effect()
  loadInitialPokemons$: Observable<Action> = this.actions$.pipe(
    ofType(MasterDetailActionTypes.StartLoadMasterDetails),
    switchMap((action: StartLoadMasterDetails) => this.pokemonService.getPokemons(action.payLoad.offset)),
    switchMap(result => of(new EndLoadMasterDetails(result))),
    catchError(err => of(new OnError(err.message)))
  );

, который имеет следующий тип действия:

export class StartLoadMasterDetails implements Action {
  readonly type = MasterDetailActionTypes.StartLoadMasterDetails;
  readonly payLoad = {
    offset: 0
  };
}

Затем внутри моего компонента я получаю исходные данные, подобные следующим:

  ngOnInit() {
    this.createStateSubscriptions();
    this.createEventScrollSubscription();
    this.store.dispatch(new actions.StartLoadMasterDetails());
  }

Мой HTML-код выглядит следующим образом:

<div class="master-container">
  <div class="wrapper-scroll-y grid-scrollbar">
    <div class="tiles-container" *ngIf="(pokemonObservable$|async).pokemonList">
      <div class="card"  *ngFor="let pokemon of (pokemonObservable$|async).pokemonList.results">
        <div (click)= "onPokemonSelected($event, pokemon.id)">
          <div class="card-body">
            <img src="{{pokemon.spriteUrl}}">
          </div>
          <div class="card-footer footer">{{pokemon.name}}</div>
        </div>
      </div>
    </div>
  </div>
  <app-loader-indicator [show]="(pokemonObservable$|async).processingMaster"></app-loader-indicator>
</div>

Теперь я пытаюсь вместо того, чтобы напрямую получать эти данные с сервера, я хочу поместить их в файл.Я попробовал это:

export const configUrl = {
  pokemonBaseUrl: {
    'pokemon-species': {
      'results': [
        {
          'name': 'bulbasaur',
          'url': 'https://pokeapi.co/api/v2/pokemon-species/1/'
        },
        {
          'name': 'ivysaur',
          'url': 'https://pokeapi.co/api/v2/pokemon-species/2/'
        }
      ]
    }
  },
};

И изменил мой http-запрос на это:

  getPokemons(offset: number): Observable<any> {
    return this.httpClient.get(`${configUrl.pokemonBaseUrl["pokemon-species"]}`)
      .pipe(
        map((pokemonList: PokemonList) => this.addAdditionalPropertiesToEntity(pokemonList))
      );
  }

Когда я консольный логин на моем configUrl.routeBaseUrl ["pokemon-видами"], я получаюданные внутри файла, но как только я запускаю свой проект, я получаю эту ошибку:

Answer 1

Похоже, что вместо того, чтобы извлекать ваши данные из API, вы просто хотите встроить свои данные непосредственно в ваше приложение. В этом случае вашему угловому сервису больше не требуется зависимость HttpClient.

Предполагая, что configUrl теперь является просто документом со всем набором данных, вы бы переключили вызов на httpClient.get с прямым запросом этого документа.

Например, ваш getPokemons метод может выглядеть примерно так:

  getPokemons(offset: number): Observable<any> {
    const numberToRetrieve = 5;
    const pokemon = configUrl.pokemonBaseUrl["pokemon-species"]["results"];
    return of(pokemon.slice(offset, numberToRetrieve));
  }

Вам также необходимо добавить функцию of в ваш rxjs импорт.

import { 
  Observable, 
  of // Add this
} from 'rxjs';

Я не знаком с API, который вы ранее вызывали, но я предполагаю, что он возвращал только несколько результатов за раз. Я добавил numberToRetrieve в качестве заполнителя, чтобы вы могли получить только следующие 5 покемонов. Это число, очевидно, может быть любым, что вы хотите, и даже может быть параметром в вашей функции.