Ответ API приложения Ionic4 не отображается в средстве просмотра (HTML) - PullRequest
Новая
       37

Ответ API приложения Ionic4 не отображается в средстве просмотра (HTML)

1 голос
/ 18 марта 2019

Я новичок в Ionic и Angular.Я просто следовал этому уроку (https://medium.freecodecamp.org/how-to-build-your-first-ionic-4-app-with-api-calls-f6ea747dc17a), который помог мне создать независимое от платформы приложение для фильмов. Чтобы расширить свое обучение, я попытался использовать тот же поток с http://api.tvmaze.com (API) вместо IMDBAPI .

Я получаю ответ от api.tvmaze.com, но он каким-то образом не появляется в интерфейсе. Я не уверен насчет функций, но я знаю поток, просто чтобы сделать егоработать, мне любопытно узнать, как это работает.

Вот фрагмент каждого кода:

Service.ts 

@Injectable({
providedIn: 'root'
})
export class TvService {
url = 'http://api.tvmaze.com/search/';
/**
Constructor of the Service with Dependency Injection
@param http The standard Angular HttpClient to make requests
*/
constructor(private http: HttpClient) { }

/**
Get data from the TvmazeApi
map the result to return only the results that we need *
@param {string} title Search Term
@param {SearchType} type shows, person or empty
@returns Observable with the search results */ 
 searchData(title: string): Observable<any> { 
  return this.http.get(${this.url}shows?q=${encodeURI(title)})
.pipe( map(results => results['']) ); }

Tvs.page.ts 

export class TvsPage implements OnInit {

  results: Observable<any>;
  searchTerm: string = '';
  //type: SearchType = SearchType.all;

/**
Constructor of our first page
@param Tv Service to get data
*/
constructor(private tvService: TvService) { }

  ngOnInit() { }

  searchChanged() {
    // Call our service function which returns an Observable
    this.results = this.tvService.searchData(this.searchTerm);
    console.log(this.results)
  }
}

tvs.page.html 

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>TV Programs Search</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="searchChanged($event)"></ion-searchbar>

  <ion-list>
 <ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'tvs', item.show.id]">
  <ion-avatar slot="start">-->
    <img [src]="item.image.medium" *ngIf="item.image.medium != 'N/A'">
  </ion-avatar>

  <ion-label text-wrap>
    <h3>{{ item.show.name }}</h3>
    {{ item.show.language }}
  </ion-label>

  <ion-icon slot="end" *ngIf="item.show.type == 'Scripted'" name="book"></ion-icon>
  <ion-icon slot="end" *ngIf="item.show.type == 'Reality'" name="desktop"></ion-icon>
  <ion-icon slot="end" *ngIf="item.show.type == 'Sports'" name="basketball"></ion-icon>

   </ion-item>
  </ion-list>
</ion-content>

Я вижу ответ JSON, получаемый в веб-консоли, но не знаю, где я делаю не так.

Ответ JSON выглядит так, как будто нет начальной переменной: не уверен, что это проблема. 

[{"id":1,"url":"http://www.tvmaze.com/shows/1/under-the-dome","name":"Under the Dome","type":"Scripted","language":"English","genres":["Drama","Science-Fiction","Thriller"],"status":"Ended","runtime":60,"premiered":"2013-06-24","officialSite":"http://www.cbs.com/shows/under-the-dome/","schedule":{"time":"22:00","days":["Thursday"]},"rating":{"average":6.5},"weight":94,"network":{"id":2,"name":"CBS","country":{"name":"United States","code":"US","timezone":"America/New_York"}},"webChannel":null,"externals":{"tvrage":25988,"thetvdb":264492,"imdb":"tt1553656"},"image":{"medium":"http://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg","original":"http://static.tvmaze.com/uploads/images/original_untouched/81/202627.jpg"},"summary":"<p><b>Under the Dome</b> is the story of a small town that is suddenly and inexplicably sealed off from the rest of the world by an enormous transparent dome. The town's inhabitants must deal with surviving the post-apocalyptic conditions while searching for answers about the dome, where it came from and if and when it will go away.</p>","updated":1549572248,"_links":{"self":{"href":"http://api.tvmaze.com/shows/1"},"previousepisode":{"href":"http://api.tvmaze.com/episodes/185054"}}},{"id":2,"url":"http://www.tvmaze.com/shows/2/person-of-interest","name":"Person of Interest","type":"Scripted","language":"English","genres":["Action","Crime","Science-Fiction"],"status":"Ended","runtime":60,"premiered":"2011-09-22","officialSite":"http://www.cbs.com/shows/person_of_interest/","schedule":{"time":"22:00","days":["Tuesday"]},"rating":{"average":9.1},"weight":93,"network":

1 Ответ

0 голосов
/ 18 марта 2019

Просто преобразовать в объект для итерации Попробуйте: JSON.parse(results.data)

...