Не удается передать данные Ionic 2

Я работаю над ионным проектом, где у меня есть файл json с подготовленными данными. Для первой страницы он загружает список, где пользователь выбирает один элемент в списке, чтобы показать его содержимое. Есть где получаю » ответ со статусом: 404 не найден для URL»

Это мой провайдер

  // geting names deatils
   getNamesDetails(title: string): Observable<Names[]> {
     return this.http.get(`${this.namesUrl}/{title}`)
        .map(
          (res) => <Names[]>res.json()
        )
   }

Класс для передачи моих данных на следующую страницу с помощью navParam.

  detailPage(title: string){
    this.navCtrl.push(NameDetails, {title});
  }

Для моего второго вида экрана

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      <!--Details-->
      {{ title }}
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="aboutUs()">
        <ion-icon ios="ios-options-outline" md="md-options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header >
      <strong>{{title}}</strong> 
    </ion-card-header>
    <ion-card-content>
      {{text}}
      <p end><i>{{verse}}</i></p>
    </ion-card-content>
  </ion-card>
</ion-content>

Моя структура файлов Json

[
    {

        "title": "some title",
        "text": "some text",
        "verse": "some text"

    }
 ]

1 ответ

  1. После долгих проб и ошибок я смог найти решение.

    Поставщик

       getNamesDetails(): Observable<Names[]> {
         return this.http.get(`${this.namesUrl}`)
            .map(
              (res) => <Names[]>res.json()
            )
       }
    

    Способ передачи данных на следующую страницу.

      detailPage(event, name: Names[]){
        console.log(name);
        this.navCtrl.push(NameDetails, {
          name: name
        })
    
      }
    

    Просмотр второй страницы.

    <ion-content padding>
      <ion-card >
        <ion-card-header >
          <strong>{{name.title}}</strong> 
        </ion-card-header>
        <ion-card-content>
          {{name.text}}
          <p item-right><em>{{name.verse}}</em></p>
        </ion-card-content>
      </ion-card>
    </ion-content>
    

    На второй странице класса конструктора, я вызываю get

      constructor(public navCtrl: NavController,
                  private http: Http, 
                  private dataService: DataService,
                  private navParams: NavParams) {
                    this.name = this.navParams.get('name')
                  }