离子列表项单击并导航

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">

您确实需要确保它在路由模块中有匹配的路由。