Remove html table row with typescript

2

Good morning !! I have a html table and need to delete a row of it with a typescript (angular 2, preferably) function ... The following is the Table Code:

<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>
    
asked by anonymous 26.06.2018 / 14:35

2 answers

6

Do you want to permanently delete or just make a condition?

For this you can use * ngIf, for example

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

or

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

All lines that are different from 'item.Angular' will appear.

You can also control the removal of items in typescript before scrolling through the list in your * ngFor, so you do not need to do * ngIf in the table, and your list will already contain the correct data to list.

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

I do not know exactly if this is what you need to do, but I believe that working with the treaty not to appear the line, it would be better to leave the line after excluding or dealing with * ngIf.

If you need anything, let me know

    
26.06.2018 / 15:35
3

See this example I have. I have a list of times for a calendar for days of the week and I want to delete the times that have passed the current date.

  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.
            }
        }
    }

I hope this helps you there

When you remove a field from a list, it becomes smaller so you should update its index

I do not know if this is what is happening in your case, but I've told you all to see what I did.

Just need to talk!

    
27.06.2018 / 15:11