Remove table line html with typescript

Question

Good morning!! I own a table html and need to delete a line from it with a function typescript(angular 2, preference)... Follows 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>

Answer 1

You want to delete definitely 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 you scroll through the list in your *ngFor, hence you don’t need to *ngIf in the table, and your list will already contain the correct data to be listed.

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 treatment to not show the line, it would be better to leave excluding the line after or dealing with *ngIf.

If you need anything, let me know

Answer 2

Look at this example I have. I have a schedule list of a schedule by days of the week and I want to exclude times that are past 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 it helps you there

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

I don’t know if that’s what’s going on in your case, but I’ve told you everything so you can see what I’ve done.

Need only speak!