Question

我是Ionic和Angular的新手。我只是遵循了本教程（https://medium.freecodecamp.org/how-to-build-your-first-ionic-4-app-with-api-calls-f6ea747dc17a），它帮助我创建了一个与平台无关的电影应用程序。为了扩展学习范围，我尝试使用与http://api.tvmaze.com（API）相同的流程，而不是 IMDB API 。

我从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>

我看到Web控制台中正在检索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":

Answer 1

只需将其转换为要迭代的对象，请尝试：JSON.parse(results.data)

Ionic4应用程序API响应未在查看器（HTML）上显示

1 个答案: