如何获取数组列表中项目的索引并导航详细信息页面 ionic 4

Question

我有一个数组 table 的列表，我想获得它们的索引值并重定向到我的详细信息页面，当我点击一个项目时，我得到一个 error

"Cannot read property 'sTelephone' of undefined"

我很困惑我的代码如下

在我的 list.component.ts 我有

itemSelected(item) {
    this.router.navigate(['/details', item]);
    console.log(item);
   }

list.component.html

<ion-list >
    <ion-searchbar  type="text" [(ngModel)]='searchKeyword' autocomplete="on" placeholder="search">
    </ion-searchbar>
    <ion-item (click)="itemSelected(item)" *ngFor="let item of ListData | myfilter : searchKeyword; let i = index" > 
      <ion-label>
        <h2>{{item.Name}}</h2> 
        <p>{{item.Description}}</p> 
      </ion-label>  
    </ion-item>
  </ion-list>

detail.component.ts

 ContactInfos: any;
  item: any;

  this.route.queryParams.subscribe( params => {
    this.item = params;
    this.ContactInfos = this.WS.ListData[this.item];
    console.log(this.ContactInfos);

  });

details.component.html

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>
          <h2>{{ContactInfos.sTelephone}}</h2>
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>

提前致谢！ :)

Answer 1

尝试使用安全导航运算符(?)

 <h2>{{ContactInfos?.sTelephone}}</h2>

Answer 2

在您的列表组件中

<ion-list >
    <ion-searchbar  type="text" [(ngModel)]='searchKeyword' autocomplete="on" placeholder="search">
    </ion-searchbar>
    <ion-item (click)="itemSelected(item,i)" *ngFor="let item of ListData | myfilter : searchKeyword; let i = index" > 
      <ion-label>
        <h2>{{item.Name}}</h2> 
        <p>{{item.Description}}</p> 
      </ion-label>  
    </ion-item>
  </ion-list>

list.component.ts

  itemSelected(item,i) {
        this.router.navigate(['/details', i]);
        console.log(item);
       }

使用这段代码你可以传递数组索引，你可以在详情页中通过索引值访问。根据我的建议，您可以传递项目 ID，并且可以通过 ID 访问详细信息页面中的特定项目。不要在详情页面加载全部数据，因为只有商品详情。

Answer 3

在您的 list.component.ts

上试试这个

this.router.navigate(['/details', { data: JSON.stringify(item) }]);

在你的detail.component.ts

let data = this.activatedRoute.snapshot.paramMap.get('data');
this.item = JSON.parse(data);
console.log(this.item);

如何获取数组列表中项目的索引并导航详细信息页面 ionic 4

How to get index of an item in array list and navigate details page ionic 4

ionic-framework

angular

ionic4