Html 基于我单击的项获取JSON数据

所以，当我点击图片时，我希望它进入一个页面，在那里它会显示所有类似的标题和其他信息，我很确定这会起作用，但我不知道为什么它不会，请帮帮我

问题是它显示的是“无法读取属性标题”

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>

家
{{item.title}

Home.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');
  }

从'@angular/core'导入{Component}；
从'ionic angular'导入{NavController}；
从“../../../node_modules/@angular/common/http”导入{HttpClient}；
从“../../../node_modules/rxjs/Observable”导入{Observable}”；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
公共物品：任何；
构造函数（公共navCtrl:NavController，公共http:HttpClient）{
这是getData（）；
}
getData（）{
让Url='www.dontworryaboutitJustHelpmePlease！IwillLoveYou.com/api'；
let data:Observable=this.http.get（Url）；
data.subscribe（结果=>{
此项=结果；
}); 
}
视图项（项目）{
this.navCtrl.push（'TvshowPage'，{item:item}）
}
}
获取信息的页面
从'@angular/core'导入{Component}；
从“离子角度”导入{IonicPage，NavController，NavParams}；
@IonicPage（）
@组成部分({
选择器：'page tvshow'，
templateUrl:'tvshow.html'，
})
导出类TvshowPage{
项目：任何；
构造函数（公共navCtrl:NavController，公共参数：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

{{item.title}


请帮助我，希望这是有意义的

附言：如果你帮助我，我将永远爱你

(click)=viewItem(item) 

在html中

您只需传递item.id，这就是我们无法获取标题的原因，所以您必须通过单击方法传递项

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

在javascript中

在这里，您将获得特定的项目数据，而不是item.id
在这里，您正在从UI传递
item.id
，请尝试传递item.id的item instant。您的代码应该如下所示：

<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 })
  }


{{item.title}
视图项（项目）{
console.log（item）；//它将显示您传递的对象中的所有项。现在您可以使用item访问任何内容。
this.navCtrl.push（'TvshowPage'，{item:item}）
}
（单击）=viewItem（item）传递项，您只传递id，因此无法获取标题just pass item和viewItem（item）{console.log（item）}在这里，您将获得特定的项目数据，而不是项目。idWait我该怎么做？您能再解释一点吗？首先，通过viewItem方法传递项目并向我显示您的日志。嗯，我刚刚尝试过，效果很好，非常感谢！！！！我永远爱你