Como enumerar dinamicamente divs com typescript/javascript no Angular?

26/05/2021

0

Angular

Olá pessoal. como pegar o último valor de um incremento? Tenho uma função de click que quando é acionada cria uma div embaixo da outra, todas semelhantes e com numeração, por exemplo, div 1, div 2 e por aí vai, toda vez que clico em um botão. Usei o incremento ++ só que toda vez que clico no botão, todas as divs ficam com o mesmo valor incrementado e preciso que fique na sequência. Vou enviar parte dos códigos para entenderem.

export class CandidateFormationComponent implements OnInit {

  url: string | null = '';
  formation_div = new FormationModel;
  formation_array:any[] = [];
  formDegree!: FormGroup;

  constructor() {
  }

  ngOnInit(){
  this.formDegree = new FormGroup({
  degree: new FormControl('', Validators.required),
  formation_year: new FormControl,
  inst_name: new FormControl,
  btn_degree: new FormControl,

});
    this.formation_array.push(this.formation_div);
  }

  onSelectFile(event:any) {
    if (event.target.files && event.target.files[0]) {
      let reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = (event:any) => {
        this.url = event.target.result;
      }
    }
  }
  public delete(){
     this.url = null;
  }

  addFormationDiv():any{
    this.formation_div = new FormationModel;
    this.formation_array.push(this.formation_div);

  }


}



  <div
        *ngFor="let formation of formation_array"
        class="row row-area toggle-div"
      >
        <div class="col-12">
          <h5>Graduação</h5>
          <br />
        </div>
        <div class="col-6 form-group">
          <label for="sel-degree">Curso</label>
          <div>
            <select
              id="sel-degree"
              formControlName="degree"
              class="form-control"
            >
              <option value="" selected>Escolher</option>
              <option value="primary-school">Ensino fundamental</option>
              <option value="high-school">Ensino médio</option>
              <option value="school-tec">Ensino técnico</option>
              <option value="college">Ensino superior</option>
              <option value="master">Mestrado</option>
              <option value="doctor">Doutorado</option>
              <option value="illiterate">Analfabeto</option>
            </select>
          </div>
        </div>
        <div class="col-4 form-group">
          <label for="date-formation">Ano de conclusão</label>
          <input
            id="date-formation"
            formControlName="formation_year"
            type="text"
            class="form-control field-height"
          />
        </div>
        <div class="col-12 form-group">
          <label for="cand-addr">Nome da instituição</label>
          <input
            id="cand-addr"
            formControlName="inst_name"
            type="text"
            class="form-control field-height"
          />
        </div>
      </div>
      <div class="col d-flex justify-content-start">
        <button
          id="btn-add-degree"
          class="btn btn-success"
          (click)="addFormationDiv()"
        >
          + Adicionar outra gradução
        </button>
      </div>
Wanderson Silva

Wanderson Silva

Responder

Posts

27/05/2021

Wanderson Silva

Olá pessoal. como pegar o último valor de um incremento? Tenho uma função de click que quando é acionada cria uma div embaixo da outra, todas semelhantes e com numeração, por exemplo, div 1, div 2 e por aí vai, toda vez que clico em um botão. Usei o incremento ++ só que toda vez que clico no botão, todas as divs ficam com o mesmo valor incrementado e preciso que fique na sequência. Vou enviar parte dos códigos para entenderem.

export class CandidateFormationComponent implements OnInit {

  url: string | null = '';
  formation_div = new FormationModel;
  formation_array:any[] = [];
  formDegree!: FormGroup;

  constructor() {
  }

  ngOnInit(){
  this.formDegree = new FormGroup({
  degree: new FormControl('', Validators.required),
  formation_year: new FormControl,
  inst_name: new FormControl,
  btn_degree: new FormControl,

});
    this.formation_array.push(this.formation_div);
  }

  onSelectFile(event:any) {
    if (event.target.files && event.target.files[0]) {
      let reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = (event:any) => {
        this.url = event.target.result;
      }
    }
  }
  public delete(){
     this.url = null;
  }

  addFormationDiv():any{
    this.formation_div = new FormationModel;
    this.formation_array.push(this.formation_div);

  }


}



  <div
        *ngFor="let formation of formation_array"
        class="row row-area toggle-div"
      >
        <div class="col-12">
          <h5>Graduação</h5>
          <br />
        </div>
        <div class="col-6 form-group">
          <label for="sel-degree">Curso</label>
          <div>
            <select
              id="sel-degree"
              formControlName="degree"
              class="form-control"
            >
              <option value="" selected>Escolher</option>
              <option value="primary-school">Ensino fundamental</option>
              <option value="high-school">Ensino médio</option>
              <option value="school-tec">Ensino técnico</option>
              <option value="college">Ensino superior</option>
              <option value="master">Mestrado</option>
              <option value="doctor">Doutorado</option>
              <option value="illiterate">Analfabeto</option>
            </select>
          </div>
        </div>
        <div class="col-4 form-group">
          <label for="date-formation">Ano de conclusão</label>
          <input
            id="date-formation"
            formControlName="formation_year"
            type="text"
            class="form-control field-height"
          />
        </div>
        <div class="col-12 form-group">
          <label for="cand-addr">Nome da instituição</label>
          <input
            id="cand-addr"
            formControlName="inst_name"
            type="text"
            class="form-control field-height"
          />
        </div>
      </div>
      <div class="col d-flex justify-content-start">
        <button
          id="btn-add-degree"
          class="btn btn-success"
          (click)="addFormationDiv()"
        >
          + Adicionar outra gradução
        </button>
      </div>


RESOLVIDO: a solução foi colocar " index as 'alguma letra ou palavra' " no final do *ngFor :D
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar