Como enumerar dinamicamente divs com typescript/javascript no Angular?

26/05/2021

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

Curtir t�pico + 0

Responder

Posts

27/05/2021

Wanderson Silva

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