读取阵列中的API以获取离子，以在文档视图中打开pdf

Question

I am new to angular and ionic. I have the following API data

[{"ID":"1","Title":"Maritime Safety","File_Name":"9c714531945ee24345f60e2105776e23.pdf","Created":"2018-11-07 17:36:55","Modified":"2018-11-07 17:36:55"}]

Which I would like to read through API in my ionic app. My ionic app code as follows:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';


@Component({
 templateUrl: 'modal-content.html',
})
export class NavigationDetailsPage {
item;

 constructor(params: NavParams) {
 this.item = params.data.item;
 }
}

@Component({
templateUrl: 'contact.html',
})
export class ContactPage {
 items = [];
 pono: string;
 inventorys: string[];
 errorMessage: string;

 constructor(public nav: NavController, public rest: RestProvider, public 
 navParams: NavParams) {
  this.pono = navParams.get('data');
    this.items = [
    {
      'title': 'Angular',
       'description': 'A powerful Javascript framework for building single 
       page apps. Angular is open source, and maintained by Google.',
      }
    ]
  }

  ionViewDidLoad() {
   this.getInsights();
  }

  getInsights() {
  this.rest.getInsights()
     .subscribe(
       inventorys => this.inventorys = inventorys,
       error =>  this.errorMessage = <any>error);
  }

  openNavDetailsPage(item) {
   this.nav.push(NavigationDetailsPage, { item: item });
 }

}

I am trying to add my API data in an array so instead of title angular will be my title and description will have my pdf name. Actually, I am trying to use document view where the title is clicked and straight away it opens a pdf where there is a back button on the top to see all the titles.

Please advise.

Answer 1

service:

Hardcoded the service section, please replace once your API returns valid response.

getInSights(){
 return of([{"ID":"1","Title":"Maritime Safety","File_Name":"9c714531945ee24345f60e2105776e23.pdf","Created":"2018-11-07 17:36:55","Modified":"2018-11-07 17:36:55"}]);
}

Component:

getInsights() {
  this.rest.getInsights()
     .subscribe(
       data => {
          this.inventorys = data.map(item=> {
            return {
              title: item.Title,
              description: item. File_Name
           ]);
       },
       error =>  this.errorMessage = <any>error);
  }