如何通过按键添加号码

Question

我希望当我按 addTituloQueHacerButton() 并获得另一个 tituloQueHacer 项目时，当我启动应用程序时，它会向我显示 TituloQueHacer1，当我按下按钮时，我希望新项目向我显示 Titulo Que Hacer 2，如果我创建另一个项目TituloQueHacer3 但它一直只显示 TituloQueHacer1，这是我的代码：

这是html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Añadir Crucero</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form [formGroup]="addCruceroForm" (ngSubmit)="onSubmit()">

    <ion-item class="titulo" color="primary">
      <ion-title>Crucero</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Nombre del Crucero:" [clearInput]="true" placeholder="Añade el nombre del Crucero" name="name" formControlName="name"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Subtitulo</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Subtitulo del Crucero" [clearInput]="true" placeholder="Añade el subtitulo del Crucero" name="subtitle" formControlName="subtitle"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen del Crucero</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Imagen del Crucero" [clearInput]="true" placeholder="Añade la imagen del Crucero" name="imagenCrucero" formControlName="imagenCrucero"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Descripción</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Descripción del Crucero" [clearInput]="true" placeholder="Añade la descripción del Crucero" name="descripcion" formControlName="descripcion"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen de la Descripción</ion-title>
    </ion-item>

    <ion-item>
      <ion-input label="Imagen de la Descripción" [clearInput]="true" placeholder="Añade la imagen de la descripcion" name="imagenDescripcion" formControlName="imagenDescripcion"></ion-input>
    </ion-item>

    <ion-item class="titulo" color="primary">
      <ion-title>Título Que Hacer</ion-title>
    </ion-item>

这是 Título Que Hacer {{ numeroElementos(0) }} vvvvv 中的问题

    <div formArrayName="tituloQueHacer">
      <div *ngFor="let control of getTituloQueHacerControls(); let i = index">
        <ion-item>
          <ion-input label="Título Que Hacer {{ numeroElementos(0) }}" [clearInput]="true" placeholder="Añade el titulo de Que Hacer" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>

^^^^^^^^^^^

    <div class="titulo">
      <ion-button (click)="addTituloQueHacerButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen Que Hacer</ion-title>
    </ion-item>
    
    <div formArrayName="imagenQueHacer">
      <div *ngFor="let control of getImagenQueHacerControls(); let i = index">
        <ion-item>
          <ion-input label="Imagen Que Hacer" [clearInput]="true" placeholder="Añade la imagen de Que Hacer" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addImagenQueHacerButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Descripción Que Hacer</ion-title>
    </ion-item>

    <div formArrayName="descripcionQueHacer">
      <div *ngFor="let control of getDescripcionQueHacerControls(); let i = index">
        <ion-item>
          <ion-input label="Descripcion Que Hacer" [clearInput]="true" placeholder="Añade la descripcion de Que Hacer" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addDescripcionQueHacerButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Título Camarotes</ion-title>
    </ion-item>

    <div formArrayName="tituloCamarotes">
      <div *ngFor="let control of getTituloCamarotesControls(); let i = index">
        <ion-item>
          <ion-input label="Título Camarotes" [clearInput]="true" placeholder="Añade el titulo de Camarotes" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addTituloCamarotesButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Descripción Camarotes</ion-title>
    </ion-item>

    <div formArrayName="descripcionCamarotes">
      <div *ngFor="let control of getDescripcionCamarotesControls(); let i = index">
        <ion-item>
          <ion-input label="Descripcion Camarotes" [clearInput]="true" placeholder="Añade la descripcion de Camarotes" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addDescripcionCamarotesButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Imagen Camarotes</ion-title>
    </ion-item>

    <div formArrayName="imagenCamarotes">
      <div *ngFor="let control of getImagenCamarotesControls(); let i = index">
        <ion-item>
          <ion-input label="Imagen Camarotes" [clearInput]="true" placeholder="Añade la imagen de Camarotes" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addImagenCamarotesButton()">+</ion-button>
    </div>
    <ion-item class="titulo" color="primary">
      <ion-title>Imagen de Planos</ion-title>
    </ion-item>

    <div formArrayName="planos">
      <div *ngFor="let control of getPlanosControls(); let i = index">
        <ion-item>
          <ion-input label="Imagen Planos" [clearInput]="true" placeholder="Añade la imagen de Planos" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addPlanosButton()">+</ion-button>
    </div>
    <ion-item class="titulo" color="primary">
      <ion-title>Lugares</ion-title>
    </ion-item>

    <div formArrayName="lugares">
      <div *ngFor="let control of getLugaresControls(); let i = index">
        <ion-item>
          <ion-input label="Lugares" [clearInput]="true" placeholder="Añade el lugar" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addLugaresButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Precio de Lugares</ion-title>
    </ion-item>

    <div formArrayName="precioLugares">
      <div *ngFor="let control of getPrecioLugaresControls(); let i = index">
        <ion-item>
          <ion-input label="Precio Lugares" [clearInput]="true" placeholder="Añade el precio de Lugares" [formControlName]="i" type="number"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addPrecioLugaresButton()">+</ion-button>
    </div>

    <ion-item class="titulo" color="primary">
      <ion-title>Puertos</ion-title>
    </ion-item>

    <div formArrayName="puertos">
      <div *ngFor="let control of getPuertosControls(); let i = index">
        <ion-item>
          <ion-input label="Puertos" [clearInput]="true" placeholder="Añade el puerto" [formControlName]="i"></ion-input>
        </ion-item>
      </div>
    </div>
    <div class="titulo">
      <ion-button (click)="addPuertosButton()">+</ion-button>
    </div>
        
    <div class="boton">
      <ion-button type="submit">Reservar</ion-button>
    </div>
  </form>
</ion-content>

这是.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterLink } from '@angular/router';
import { AlertController } from '@ionic/angular';
import { CrucerosService } from '../cruceros.service';

@Component({
  selector: 'app-add-crucero',
  templateUrl: './add-crucero.page.html',
  styleUrls: ['./add-crucero.page.scss'],
  standalone: true,
  imports: [CommonModule, FormsModule, IonicModule, RouterLink, ReactiveFormsModule]
})
export class AddCruceroPage  {

  constructor(public crucerosService: CrucerosService, private alertController: AlertController) { }

  addCruceroForm = new FormGroup({
    name: new FormControl(""),
    subtitle: new FormControl(""), 
    imagenCrucero: new FormControl(""), 
    descripcion: new FormControl(""), 
    imagenDescripcion: new FormControl(""), 
    tituloQueHacer: new FormArray([new FormControl('')]), 
    imagenQueHacer: new FormArray([new FormControl('')]),
    descripcionQueHacer: new FormArray([new FormControl('')]),
    tituloCamarotes: new FormArray([new FormControl('')]),
    descripcionCamarotes: new FormArray([new FormControl('')]),
    imagenCamarotes: new FormArray([new FormControl('')]),
    planos: new FormArray([new FormControl('')]),
    lugares: new FormArray([new FormControl('')]),
    precioLugares: new FormArray([new FormControl('')]),
    puertos: new FormArray([new FormControl('')])
  })

这里也是vvvvvv

  numeroElementos(numero: number){
    numero = numero + 1
    return numero
  }

^^^^^^^

  addTituloQueHacerButton() {
    (this.addCruceroForm.get('tituloQueHacer') as FormArray).push(new FormControl(''));
  }

  getTituloQueHacerControls() {
    return (this.addCruceroForm.get('tituloQueHacer') as FormArray).controls;
  }

  addImagenQueHacerButton() {
    (this.addCruceroForm.get('imagenQueHacer') as FormArray).push(new FormControl(''));
  }

  getImagenQueHacerControls() {
    return (this.addCruceroForm.get('imagenQueHacer') as FormArray).controls;
  }

  addDescripcionQueHacerButton() {
    (this.addCruceroForm.get('descripcionQueHacer') as FormArray).push(new FormControl(''));
  }

  getDescripcionQueHacerControls() {
    return (this.addCruceroForm.get('descripcionQueHacer') as FormArray).controls;
  }

  addTituloCamarotesButton() {
    (this.addCruceroForm.get('tituloCamarotes') as FormArray).push(new FormControl(''));
  }

  getTituloCamarotesControls() {
    return (this.addCruceroForm.get('tituloCamarotes') as FormArray).controls;
  }
  addDescripcionCamarotesButton() {
    (this.addCruceroForm.get('descripcionCamarotes') as FormArray).push(new FormControl(''));
  }

  getDescripcionCamarotesControls() {
    return (this.addCruceroForm.get('descripcionCamarotes') as FormArray).controls;
  }
  addImagenCamarotesButton() {
    (this.addCruceroForm.get('imagenCamarotes') as FormArray).push(new FormControl(''));
  }

  getImagenCamarotesControls() {
    return (this.addCruceroForm.get('imagenCamarotes') as FormArray).controls;
  }
  addPlanosButton() {
    (this.addCruceroForm.get('planos') as FormArray).push(new FormControl(''));
  }

  getPlanosControls() {
    return (this.addCruceroForm.get('planos') as FormArray).controls;
  }
  addLugaresButton() {
    (this.addCruceroForm.get('lugares') as FormArray).push(new FormControl(''));
  }

  getLugaresControls() {
    return (this.addCruceroForm.get('lugares') as FormArray).controls;
  }
  addPrecioLugaresButton() {
    (this.addCruceroForm.get('precioLugares') as FormArray).push(new FormControl(''));
  }

  getPrecioLugaresControls() {
    return (this.addCruceroForm.get('precioLugares') as FormArray).controls;
  }
  addPuertosButton() {
    (this.addCruceroForm.get('puertos') as FormArray).push(new FormControl(''));
  }

  getPuertosControls() {
    return (this.addCruceroForm.get('puertos') as FormArray).controls;
  }

  private createArray(size: number): FormControl[] {
    const array = [];
    for (let i = 0; i < size; i++) {
      array.push(new FormControl(''));
    }
    return array;
  }

  async onSubmit(){
    await this.crucerosService.guardarCrucero(
      this.crucerosService.idCrucero,
      this.addCruceroForm.value.name,
      this.addCruceroForm.value.subtitle,
      this.addCruceroForm.value.imagenCrucero,
      this.addCruceroForm.value.descripcion,
      this.addCruceroForm.value.imagenDescripcion,
      this.addCruceroForm.value.tituloQueHacer,
      this.addCruceroForm.value.imagenQueHacer,
      this.addCruceroForm.value.descripcionQueHacer,
      this.addCruceroForm.value.tituloCamarotes,
      this.addCruceroForm.value.descripcionCamarotes,
      this.addCruceroForm.value.imagenCamarotes,
      this.addCruceroForm.value.planos,
      this.addCruceroForm.value.lugares,
      this.addCruceroForm.value.precioLugares,
      this.addCruceroForm.value.puertos
    )
    this.alertaReserva();
  }

  async alertaReserva() {
    const alert = await this.alertController.create({
      header: '¡Crucero Añadido Con Éxito!',
      buttons: ['Aceptar'],
    });

    await alert.present();
  }

}

Answer 1

您必须使用

let i = index

、

i

属性，只需在其中添加 1 即可。但由于我们只想添加数字而不是字符串，因此我将其括在括号内。我将其更改为使用属性绑定，而不是

{{ ... }}

。所以我们可以将一个字符串与索引 + 1 连接起来

      <ion-input
        [label]="'Título Que Hacer ' + (i + 1)"
        [clearInput]="true"
        placeholder="Añade el titulo de Que Hacer"
        [formControlName]="i"
      ></ion-input>

Stackblitz 演示