数据未传递到 id 页面

Question

我想将项目数据传递到详细信息页面。导航工作正常。但是，如果我想使用字符串插值来输出所选项目，则什么也没有（空输出）。我尝试使用应用程序-routing.module，但没有用。

这是我的代码。

item.html

 <ion-title> {{ item.username }} </ion-title>

item.ts

loadedItems: Item[];
  item: Item;
...
    openRankdet() {
        this.router.navigate(['itemdetail/:id'])
      }

item.model.ts

export class Item {
    constructor(
        public id: string, 
        public username: string, 
        public imageUrl: string,
        public imageUrl2: string,
         ) {

         }
}

item.service

 private _item: Item[] = [ //dummy data
    new Item(
     'r1',
     'Martin',
     'assets/7.jpeg',
     'assets/two.jpeg',
     ),
];
...
 get item() {
    return [...this._item];
  }

  constructor() { }

  getItem(id: string) {
    return {...this._item.find(r => r.id === id)};
  }

itemdetail.ts

item: Item;  //store item data model
constructor() {}
...
ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      if (!paramMap.has('id')) {
        this.router.navigate[('item')];
        return;
      }
      this.item = this.itemservice.getItem(paramMap.get('id'));
    }); 

}

app-routing.module.ts

    ...
     { path: 'itemdetail/:id', loadChildren: './itemdetail/itemdetail.module#ItemdetailPageModule' },
    ...

Answer 1

在你的 item.service 中，试试：

//dummy data
 private _items: Item[] = [ 
    {
     id: 'r1',
     username: 'Martin',
     imageUrl: 'assets/7.jpeg',
     imageUrl2: 'assets/two.jpeg',
     },
];

 get item() {
    return [...this._items];
  }

  constructor() { }

  getItem(id: string) {
    let item: Item;
    for (let i = 0; i < this._items.length; i++) {
      if(this._items[i].id == id) {
         item = this._items[i];
         break;
      }
    }
   return item;
  }

在你的 item.ts 中，试试：

openRankdet() {
    this.router.navigate(['itemdetail/' + this.item.id])
  }

Answer 2

我实际上通过使用问题中的所有代码解决了这个问题，但是使用了 routerLink 而不是点击事件。 [routerLink]="['/itemdetail', item.id]

数据未传递到 id 页面

Data is not passed on to id page

typescript

ionic-framework

angular

ionic4