单击时将项目从 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 favourites.ts

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的.getItem和.setItem来保留页面之间的信息。如果您不是在框架中编写，这可能是要走的路。

addFavourite(card, i) {
  this.cardFavouriteArray.push(card);
  localStorage.setItem('cardFavouriteArray', JSON.stringify(this.cardFavouriteArray))
}
...
ionViewDidLoad() {
  this.favouriteArray = JSON.parse(localStorage.getItem('cardFavouriteArray'));
}