1
resposta

Utilizar ngModel com índice

Olá boa tarde,

Estou fazendo uma table no qual estou utilizando o ngfor nela pra que sempre que o usuário clicar em um botão "Incluir" ela seja replicada. Porém, gostaria de colocar um índice em cada ngmodel dos elementos dessa tabela (label, select, input, etc) pois quando replica a tabela o conteúdo fica o mesmo para a original e a replicada e gostaria que fossem comportamentos independentes. É possível colocar índice no ngmodel? como eu declararia essas variáveis no typescript?

Estava tentando fazer: *ngFor="let linha of linhas; let i = index""

E nos ngmodel: [(ngmodel)]="blocoselecionado[i]"

No typescript estava declarando blocoselecionado: String[] i: number

E para utilizar a variável: this.blocoselecionado[this.i] = ...

mas aparentemente os valores não estava chegando na variável depois que fiz essas mudanças porque ela fica sempre como undefined

Desde já muito obrigada.

1 resposta

Olá, Bianca! Tudo bem?

Quando você faz let linha of linhas, a variável linha é o suficiente para utilizar o ngModel para que a propriedade representada por linha seja atualizada.

Eu não entendi ao certo se você possui duas arrays, linhas e blocoselecionado, e qual seu objetivo com elas.

Usar um ngModel dentro de um ngFor funciona bem quando ambos estão tratando o mesmo objeto. Então, por exemplo, se você fizesse:

[(ngModel)]="linha"

O valor que fosse inserido no campo do ngModel seria colocado em linha. Se linha é um objeto e você quer modificar uma propriedade específica dele, você pode fazer algo como linha.idade (supondo que a propriedade é idade).

Certo? Agora a parte que eu fiquei um pouco confuso é sobre replicar a tabela. Você quer duas tabelas? E o que exatamente você quer replicar? Eu percebi que blocoselecionado é uma array de strings, mas e linhas?

Eu acho que a questão é a seguinte, se você quer acessar um item de blocoselecionado, não faz mais sentido usar blocoselecionado no ngFor:

*ngFor="let item of blocoselecionado"

E o seu ngModel ficaria:

[(ngModel)]="item"

Enfim, apenas algumas coisas que eu pensei. Para te ajudar melhor, eu precisaria saber pelo menos qual o processo que você está tentando fazer, qual seu objetivo. Melhor também se você pudesse mandar o código.

Qualquer coisa é só avisar. Espero que ajude!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software