Question

当我从一页返回到自己的页面时，我在使用ngFor复制项目时遇到了麻烦。第一次运行代码时，它很好，可以执行我需要做的事情，但是当我使用ngFor从一个选项卡返回到原始选项卡时，它将复制这些项目。

TS代码；

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
 export class HomePage {
 selection: any[];
 titles: any[];
 show: boolean = false;

 constructor(private modalCtrl: ModalController,
          private photoService: PhotoService) {}

ionViewWillEnter() {
this.titles = this.photoService.getTitle();
this.selection = this.photoService.getPhotoRoll();
if(this.titles.length > 0) {
  this.show = true;
}
console.log(this.selection);
}

onPlaySlide(index: number) {
const num = { number: index }
console.log(index);
const modal = this.modalCtrl.create(SlidePage, num);
modal.present();
}

}

HTML代码；

<ion-list *ngIf="show">
  <ion-item-sliding
    *ngFor="let select of selection; let i = index">
    <ion-item (click)="onPlaySlide(i)">
        <ion-thumbnail item-start>
          <img [src]="select.img">
        </ion-thumbnail>
        <h2 *ngFor="let title of titles">{{ title }}</h2>
    </ion-item>
    <ion-item-options>
      <button 
        ion-button 
        color="danger"
        (click)="onRemoveFromPhotoRoll(select)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

谢谢您的帮助。

Answer 1

将您的服务呼叫设置为已加载：

ionViewDidLoad{
this.titles = this.photoService.getTitle();
this.selection = this.photoService.getPhotoRoll();
if(this.titles.length > 0) {
  this.show = true;
}
console.log(this.selection);

}

Ionic ng用于在我从另一页返回原始页时复制项目

1 个答案: