单击时将ngFor中的项目传递给另一页的对象

Question

我正在尝试将项目从ngFor-Loop推送到另一页的对象。不幸的是，我无法访问该对象。

HTML home.html

  <ion-card class="card card-ios" *ngFor="let card of cardArray; let i = index">
  ....
  <button class="favButton" ion-button icon-start clear (click)="addFavourite(card, i)">

JS home.ts

public cardFavouriteArray: any = [];
cardFavouriteArray: any = [];

addFavourite(card, i) {
  this.cardFavouriteArray.push(card);
}

HTML favourites.html

<ion-card class="card card-ios" *ngFor="let card of favouriteArray; let i = index">

JS收藏夹

favouriteArray: any = [];

 ionViewDidLoad() {
    this.favouriteArray = this.cardFavouriteArray;
 }

这不起作用。我遇到问题 "property "cardFavouriteArray" does not exist on type FavouritesPage.

Answer 1

您可以在此处在页面之间导航时考虑传递喜欢的favorite对象。此后，一旦您登陆页面。在该组件上查找传递的对象

constructor(private navCtrl: NavController) {}

addFavourite(card, i) {
  this.cardFavouriteArray.push(card);
}

navigateToOtherPage(){

    this.navCtrl.push(FavoritesPage, this.cardFavouriteArray);
}

代码

@Component({
  ...
})
class OtherPage {
  constructor(private navParams: NavParams) {
     console.log("navParams", navParams)
  }
}

详细了解NavController

Answer 2

如何使用localStorage

解决问题

我们可以使用localStorage的{​​{1}}和.getItem来保持页面之间的信息。如果您不是用Framework编写的，那可能就是这样做的方式。

.setItem