根據我點擊的項目獲取 JSON 數據 ionic ionic 3

Question

因此，當我單擊圖像時，我希望它轉到一個頁面，在該頁面上顯示所有類似的標題和其他信息，我很確定這會起作用，但我不知道為什么它不會請幫助我！

問題是它顯示了“無法讀取屬性標題”

主頁.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：如果你幫助我，我會永遠愛你！

Answer 1

在這里，您從 UI 傳遞item.id嘗試傳遞 item.id 的 item 即時。 您的代碼應如下所示：

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

Answer 2

(click)=viewItem(item) 

在 html 中

您只需傳遞 item.id 這就是為什么無法獲得標題的原因，因此您必須通過單擊方法傳遞 item

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

在 JavaScript 中

在這里您將獲得特定的項目數據而不是 item.id