离子列表项单击并导航答案

【问题标题】：ion-list item click and navigate离子列表项单击并导航
【发布时间】：2020-02-09 11:29:30
【问题描述】：

如何使我的离子列表可点击并显示详细信息页面以显示有关点击项目的更多详细信息

我会再做一个详情页来处理详情数据

但是如何使列表可点击并显示另一个包含详细信息的页面 我的广告页面 .html，其中包含 ion-list

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

【问题讨论】：

标签： html angular ionic-framework ionic4 ionic-native

【解决方案1】：

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

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

【讨论】：

【解决方案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';
}`

问候，

【讨论】：

【解决方案3】：

您现在可以添加 routerLink：

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

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

【讨论】：