根据我点击的项目获取 JSON 数据 ionic ionic 3答案

【问题标题】：Get JSON data based on the item I clicked ionic ionic 3根据我点击的项目获取 JSON 数据 ionic ionic 3
【发布时间】：2019-01-25 01:32:13
【问题描述】：

因此，当我单击图像时，我希望它转到显示所有类似标题和其他信息的页面，我很确定这会起作用，但我不知道为什么它不起作用请帮助我！

问题是它显示了这个“无法读取属性标题”

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</ion-header>

<ion-content padding>
  <ion-searchbar
  [(ngModel)]="myInput"
  [showCancelButton]="shouldShowCancel"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>

  <div class="row">
    <div class="column" *ngFor="let item of items">
      <img [src]="item.thumbnailUrl" alt="Snow" style="width:100%;border-radius: 4px;" (click)="viewItem(item.id)">
      {{item.title}}
    </div>
  </div>


</ion-content>

首页.ts

   import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '../../../node_modules/@angular/common/http';
import { Observable } from '../../../node_modules/rxjs/Observable';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public items: any;
  constructor(public navCtrl: NavController,public http: HttpClient) {
      this.getData();
  }

  getData(){
    let Url = 'www.dontworryaboutitJustHelpmePlease!IwillLoveYou.com/api';
    let data: Observable<any> = this.http.get(Url);
    data.subscribe(result =>{
      this.items = result;
    }); 
  }
  viewItem(item){
    this.navCtrl.push('TvshowPage', { item: item })
  }
}

The page thats getting the information ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-tvshow',
  templateUrl: 'tvshow.html',
})
export class TvshowPage {
  item: any;
  constructor(public navCtrl: NavController, public params:NavParams) {
      this.item = params.get('item');
  }

}

获取信息的页面 html

    <ion-header>

      <ion-navbar>
        <ion-title></ion-title>
      </ion-navbar>

    </ion-header>


<ion-content padding>
      <p>{{item.title}}</p>
</ion-content

请帮助我，希望这是有道理的。

ps：如果你能帮助我，我会永远爱你！

【问题讨论】：

(click)=viewItem(item) 传递项目，你只传递 id 所以你不能得到标题只是传递项目和 viewItem(item){ console.log(item)} 你会获取特定项目数据而不是 item.id
等等我该怎么做，你能解释一下吗
首先传递项目并通过 viewItem 方法向我显示您的日志
嗯，我刚试了一下，效果很好，非常感谢！！！！我永远爱你

标签： html json angular ionic-framework ionic3

【解决方案1】：

(click)=viewItem(item)

在html中

你只是传递 item.id 这就是为什么无法获得标题所以你必须通过点击方法传递 item

viewItem(item){ 
 console.log(item)
 }

在 JavaScript 中

在这里您将获得特定的商品数据，而不是 item.id

【讨论】：

【解决方案2】：

在这里，您从 UI 传递 item.id 尝试传递 item.id 的项目瞬间。您的代码应如下所示：

<div class="row">
    <div class="column" *ngFor="let item of items">
      <img [src]="item.thumbnailUrl" alt="Snow" style="width:100%;border-radius: 4px;" (click)="viewItem(item)">
      {{item.title}}
    </div>
  </div>



viewItem(item){
    console.log(item); //It will show you every items from your object that you passed. now you can access anything by using item.
    this.navCtrl.push('TvshowPage', { item: item })
  }

【讨论】：