Question

我在离子中使用过这种形式的方法：

当我填写表单并提交它们时，会出现新的幻灯片，但如果我重新启动应用程序，则一切都会回到第一个。我怎样才能解决这个问题？我想在幻灯片中保存这些输入以再次使用它们......

代码的某些部分：

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

每次重新启动应用时，幻灯片组件都会再次初始化，默认情况下，此组件始终在第一张幻灯片中初始化（index = 0）。

首先，您应该保存（在数据库中，在LocalStorage中，在提供程序中等）要保留的幻灯片的索引。为此，每次更换幻灯片时都可以使用 getActiveIndex（）方法。

如果要初始化特定幻灯片（例如，已保存的幻灯片）中的幻灯片组件，可以使用属性： initialSlide ，并使用索引号设置它你想要的幻灯片。

例如，如果要在index = 2的幻灯片中初始化幻灯片组件，则应该像这样使用它：

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

有关幻灯片组件的更多信息，我建议您阅读有关此内容的官方Ionic文档。

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

我希望它可以帮助您解决问题。

重复使用离子形式的输入

1 个答案: