重復使用離子形式的輸入

Question

我已經在ionic中使用了這種形式的方法：

當我填寫表格並提交時，會出現新的幻燈片，但是如果我重新啟動應用程序，一切都會回到第一個。 我怎樣才能解決這個問題？ 我想將此輸入保存在幻燈片中以再次使用它們...

代碼的某些部分：

.html：

<ion-slide *ngFor="let slide of slides">
  <ion-header>
    <ion-navbar>
      <ion-title text-center class="persian pdtop" > <ion-icon name = '{{slide.icon}}'> </ion-icon> {{slide.ttl}}</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content padding>
    <img [src]="slide.image" class="slide-image"/>
    <h2 class="slide-title persian2" [innerHTML]="slide.title"></h2>
    <p class="persian" [innerHTML]="slide.description"></p>
  </ion-content>
</ion-slide>
<form [formGroup]="todo" (ngSubmit)="logForm()">
  <ion-item>
    <ion-label>Title</ion-label>
    <ion-input type="text" formControlName="title"></ion-input>
  </ion-item>    
  <ion-item>
    <ion-label>Icon</ion-label>
    <ion-input type="text" formControlName="icon"></ion-input>
  </ion-item>    
  <ion-item>
    <ion-label>Header</ion-label>
    <ion-input type="text" formControlName="ttl"></ion-input>
  </ion-item>    
  <ion-item>
    <ion-label>image</ion-label>
    <ion-input type="text" formControlName="image"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Description</ion-label>
    <ion-textarea formControlName="description"></ion-textarea>
  </ion-item>
  <button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
</form>

.ts：

// ...
export class HomePage {
  private todo : FormGroup;
  constructor(public nav: NavController, private formBuilder: FormBuilder ) {
    this.todo = this.formBuilder.group({
      title: ['', Validators.required],
      description: [''],
      icon: [''],
      ttl: [''],
      image: [''],
    });
  }

  logForm(){
    console.log(this.todo.value);
    this.slides.push(this.todo.value);
  }

  slides = [
    {
      title: "HBD",
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
      image: "",
      ttl: "no.1",
      icon: "heart",
    },
    {
      title: "What is Ionic?",
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
      image: "",
      ttl: "my love",
      icon: "heart",
    }
  ];
}

//...

當我填寫表格並提交時，會出現新的幻燈片，但是如果我重新啟動應用程序，一切都會回到第一個。 我怎樣才能解決這個問題？ 我想將此輸入保存在幻燈片中以再次使用它們...

Answer 1

每次重新啟動應用程序時，都會再次初始化Slides組件，並且默認情況下始終在第一張幻燈片中初始化此組件（index = 0）。

首先，您應該（在數據庫，LocalStorage，提供程序等中）保存要保留的幻燈片的索引。 為此，您可以在每次更改幻燈片時使用getActiveIndex（）方法。

如果要初始化特定幻燈片（例如，已保存的幻燈片）中的“幻燈片”組件，則可以使用屬性： initialSlide ，並將其設置為所需幻燈片的索引號。

例如，如果要使用index = 2初始化幻燈片中的Slides組件，則應按以下方式使用它：

<ion-slides intitialSlide="2">
  <ion-slide>
  </ion-slide>
<ion-slides>

有關“幻燈片”組件的更多信息，我建議閱讀有關此內容的官方Ionic文檔。

https://ionicframework.com/docs/api/components/slides/Slides

我希望它將幫助您解決問題。