2

Bom dia!! Possuo uma tabela html e preciso excluir uma linha dela com uma função typescript(angular 2, de preferencia)... Segue o Código da tabela:

<div class="col-md-12">
  <div *ngIf="itens.length" class="table-responsive">
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th></th>
          <th class="text-center">Código</th>
          <th class="text-center">Descrição</th>
          <th class="text-center">Quantidade</th>
          <th class="text-center">Preço Digitado</th>
          <th class="text-center">Preço Total</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of itens">
          <th class="text-center">
            <input type="button" value="" (click)="removerLinha(this)" />
          </th>
          <td class="text-center">{{item.codigoProduto}}</td>
          <td class="text-center">{{haha}}</td>
          <td class="text-center">{{item.Quantidade}}x</td>
          <td class="text-center">{{item.PrecoDigitado | currency: 'BRL': true}}</td>
          <td class="text-center"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

2 Respostas 2

6

Você quer excluir definitivamente ou só fazer uma condição?

Pra isso você pode usar o *ngIf, por exemplo

<td *ngIf="item.nome != 'Angular'">{{item}}</td>

ou

<input *ngIf="item.nome != 'Angular'"></input>

Todas as linhas que forem diferentes de 'item.Angular' aparecerão.

Você pode também controlar a remoção dos itens no typescript antes de percorrer a lista no seu *ngFor, daí não precisa fazer *ngIf na tabela, e sua lista já vai conter os dados corretos a serem listados.

this.itens.splice(i, 1); 
//i = indice que deseja excluir da lista de itens, e 1 = quantidade a partir disso.

Eu não sei exatamente se é isso que precisa fazer, mas acredito que trabalhar com a tratativa pra não aparecer a linha, seria melhor que sair excluindo a linha depois ou tratando com *ngIf.

Se precisar de alguma coisa me fala

3
  • 2
    Você pode enviar no seu removerLinha o item da lista que não deseja mais exibir e no método de remoção você faz o splice para remover o item da lista e chama novamente a lista para atualizar na tela. Daí quando na sua tela for atualizado os dados você vai perceber que a linha que possua os dados do ítem que foi excluído não aparecerão mais. 26/06/2018 às 13:43
  • 1
    pronto, muito obrigado, resolveu o meu problema 26/06/2018 às 14:15
  • 1
    Detalhei pra você um exemplo meu aí embaixo. 27/06/2018 às 13:11
3

Veja esse exemplo que tenho. Tenho uma lista de horários de uma agenda por dias da semana e quero excluir os horários que já passou da data corrente.

  let sizeList = this.horariosIntervalo.length; //O tamanho da lista recebe o tamanho da minha lista de horários 
        for (let i = 0; i < sizeList; i++) { //Percorro o sizeList
            if(this.diaEscolhido.toLocaleDateString() == new 
                Date().toLocaleDateString()){ //Confiro se o dia escolhido na agenda é data corrente

             if (this.horariosIntervalo[i].horarioIntervalo < (addHours(new 
                 Date(), 1))) { //verifico se o horário da lista é menor que uma hora antes do agendamento.

                this.horariosIntervalo.splice(i, 1); //Se for eu excluo esse horário da lista.
               //Pego o interevaloHorarios que é minha lista, dou um splice indicando o índice que quero excluir da lista, e na frente a quantidade que desejo excluir, no meu caso só esse horário. 

              sizeList--; //Perceba que a minha lista agora possui um dado a menos pois exclui um horário do intervalo, portanto o tamanho da minha lista é sizeList - 1
              i--; //Volto para o índice anterior, após remover o item da lista.
            }
        }
    }

Espero que te ajude isso aí

Quando você remove um campo de uma lista, ela passa a ter um tamanho menor portanto deve se atualizar o seu índice;

Não sei se é isso que está ocorrendo no seu caso, mas comentei tudo pra você ver o que eu fiz.

Precisando é só falar!

1
  • eu consegui ajeitar, e no caso era um problema meu mesmo, obrigado novamente ^^ 27/06/2018 às 13:13

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 .