離子列表項單擊並導航

Question

如何使我的離子列表可點擊並顯示詳細信息頁面以顯示有關所點擊項目的更多詳細信息

我將制作另一個頁面，如詳細信息來處理詳細信息數據

但是我怎樣才能使列表可點擊並顯示另一個頁面，其中包含我的廣告頁面的詳細信息。html 具有離子列表

 <ion-header> <ion-toolbar> <ion-title> My App </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-item-divider> <ion-label color="dark"> Latest Ads </ion-label> </ion-item-divider> <ion-list *ngFor="let item of dataArray"> <ion-item> <ion-thumbnail slot="start"> <img class="img-thumbnail" src="https://mysite.co/uploads/{{ item.document }}"> </ion-thumbnail> <ion-label> <h2 color="primary">{{ item.title }}</h2> <h3>{{ item.city }}</h3> </ion-label> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <!-- Tab bar --> <ion-tabs> <ion-tab-bar> <ion-tab-button routerLink="/menu"> <ion-icon name="home"></ion-icon> </ion-tab-button> <ion-tab-button routerLink="/contactus"> <ion-icon name="call"></ion-icon> </ion-tab-button> </ion-tab-bar> </ion-tabs> <!-- Tab bar --> </ion-toolbar> </ion-footer>

我的廣告頁面.ts 文件

 import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-adspage', templateUrl: './adspage.page.html', styleUrls: ['./adspage.page.scss'], }) export class AdspagePage implements OnInit { dataArray; constructor(private http: HttpClient) { this.http.get('https://mysite.co/reset-api.php').subscribe((response: any) => { console.log(response); this.dataArray = response; }); } ngOnInit() { } }

Answer 1

`<ion-item button="true" (click)="showDetail()"`

然后你可以在 component.ts 文件中初始化函數 showDetail

Answer 2

在 HTML 上進行以下更改：

`<ion-list *ngFor="let item of dataArray">` 

必須是

`<ion-list *ngFor="let item of dataArray; let i = index">`

和

`<ion-item>` 

必須是<ion-item (click)="goDetail(i);">

在 ts 文件上，您必須使用此方法：

`goDetail(num: value){
    console.log("go to page " + num);
    // Add here the code to navigate: e.g this.router.navigate(['page'];
    // You would must import import { Router } from '@angular/router';
}`

問候，

Answer 3

您現在可以添加 routerLink：

<ion-item
  routerLink="/item/details">

您確實需要確保它在路由模塊中有匹配的路由。