无法通过数据离子 2答案

【问题标题】：Fail to Pass Data Ionic 2无法通过数据离子 2
【发布时间】：2017-03-14 19:03:22
【问题描述】：

我正在从事一个离子项目，其中我有一个包含准备好的数据的 json 文件。对于第一页，它加载列表，用户在列表中选择一个项目以显示其内容。在哪里得到“状态响应：404 Not Found for 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"

    }
 ]

【问题讨论】：

我很困惑，您是从 json 文件中获取信息但将其作为参数传递却不起作用？
Stack sn-ps 适用于 runnable 代码。您的示例无法运行。
@sebaferreras 进行了更改。对于标题显示，但其他 2 不起作用。当我在 chrome 开发工具“localhost:8100/data/names.json/%7Btitle%7D404（未找到）”中检查时
@FelixKling 我无法使用代码选项卡显示所有代码，我更喜欢使用代码片段。
格式化代码很简单：插入代码，选中所有代码并按 CTRL+K 。另见stackoverflow.com/editing-help#code。

标签： json angular typescript ecmascript-6 ionic2

【解决方案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')
              }

【讨论】：