Como enumerar dinamicamente divs com typescript/javascript no 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
Curtidas 0
Respostas
Wanderson Silva
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>
RESOLVIDO: a solução foi colocar " index as 'alguma letra ou palavra' " no final do *ngFor :D
GOSTEI 0