-2

No meu componente tenho 2 objetos que utilizam o mesmo modelo, como abaixo:

Componente:

produtos: Produto[] = [];
produtosOriginal: Produto[] = [];

Em determinado momento faço a cópia dos valores:

this.produtosOriginal = this.produtos;

No HTML, eu faço um for e vinculo o input a propriedade:

HTML:

<ng-container *ngFor="let produto of produtos; let i = index;">
   ...

   <input class="form-control form-control-sm"
          type="number"
          min="1"
          step="1"
          (focusout)="validarItem(produto.id)" 
          (input)="validarItem(produto.id)"
          [ngClass]="{ 'is-invalid': produto.erroQtde }" 
          [(ngModel)]="produto.qtde" />
</ng-container>

Quando realizo uma alteração no input o valor é repassado para os 2 objetos, já verifiquei se esse valor está sendo passado por outro fator, mais com certeza o problema está com o [(ngModel)]. Como consigo atualizar somente o objeto produtos.

Observação:

  1. Estou utilizando Angular 8.
  2. Já tentei utilizar [(ngModel)]="produtos[i].valor" mais sem resultado.
10
  • 1
    A lista produtos é uma cópia de produtosOriginal? se for você vai ter de copiar uma para outra usando spread (...). Ficaria assim a assimilação: produtos = {...produtosOriginal}; assim a alteração em "produtos" não reflete em "produtosOriginal". Commented 12/09/2019 às 18:38
  • Não deu pra entender muito bem, pq tem 2 variáveis diferentes com o mesmo tipo de objeto no mesmo componente?
    – LeAndrade
    Commented 12/09/2019 às 18:50
  • Se você estiver populando produtos através da produtosOriginal da seguinte forma: this.produtos = this.produtosOriginal; você não está passando os valores, está passando a referencia. Logo produtos aponta pra produtosOriginal, e qualquer alteração em produtos irá alterar produtosOriginal. Espero que de pra entender... Commented 12/09/2019 às 19:07
  • Leonardo Getulio, tentei fazer como você passou, só que para minha lógica seria o inverso: this.produtosOriginal = { ... this.produtos }; só que não consigo mais acessar os métodos por ex: this.produtosOriginal.length
    – Alessandro
    Commented 12/09/2019 às 19:38
  • Lucas Ayrosa, qual seria então a maneira correta de popular uma cópia?
    – Alessandro
    Commented 12/09/2019 às 19:42

2 Respostas 2

0

Você deve clonar o objeto para que isso não ocorra, segue os exemplos de como você pode estar fazendo isso.

Método 01

this.produtosOriginal = [ ... this.produtos ];

Método 02

this.produtosOriginal = JSON.parse(JSON.stringify(this.produtos));
5
  • pra copiar arrays tem que ser com colchetes Commented 12/09/2019 às 20:18
  • @EduardoVargas corrigido, não me atentei que era vetor. Commented 12/09/2019 às 20:22
  • O método 02 funcionou, no entanto, o método 1 que parece mais 'limpo' continua refletindo as alterações efetuadas em this.produtos.
    – Alessandro
    Commented 12/09/2019 às 20:29
  • @Alessandro eu atualizei a resposta, tente com a nova resposta. Commented 12/09/2019 às 20:31
  • @HiagoSouza, já tinha tentando após sua alteração, mais ainda persistia em refletir, pelo que percebi ele cria uma cópia superficial, optei por utilizar uma abordagem diferente que também funcionou: this.produtosOriginal = this.produtos.map(objeto => ({...objeto})); Sugiro que inclua na sua resposta. Muito obrigado pela atenção!
    – Alessandro
    Commented 12/09/2019 às 20:41
0

Uma maneira rapida de clonar uma matriz..

clone(fn) {
    const arr = [...Array(1000000)];
    console.time('timer');
    fn(arr);
    console.timeEnd('timer');
}

Nota: dentre todas as maneiras, a única maneira de clonar profundamente uma matriz é usando

JSON.parse(JSON.stringify(arr)).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .