Edit table in Angular 6

Question

Edit table in Angular 6

Navigation

#1 by (2 votes)

0

I have had some problems, because I am not familiar with Angular 6. I have this table:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Código</th>
                        <th>Nome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let operator of dataSource">
                        <td>{{ operator.operatorId }}</td>
                        <td>{{ operator.name }}</td>
                    </tr>
                </tbody>
            </table>     
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <button type="submit" class="btn btn-primary pull-right" >Atualizar</button>
    </div>
    <div class="col-md-6">
            <button type="submit" class="btn btn-primary" >Deletar</button> 
        </div>
</div>

I need to edit it, so I can give an Update (Put or Patch). How do I do? I would like to not use jquery because I am inside the Angular.

html angular angular-6

asked by anonymous 17.07.2018 / 19:28

1 answer

Test of variable true or false Error executing query within function

score 2 · Accepted Answer

Then, you can do the following, as you have ngFor, put a third and fourth column to use the chosen operator, like this:

<tr *ngFor="let operator of dataSource">
  <td>{{ operator.operatorId }}</td>
  <td>{{ operator.name }}</td>
  <td><button ng-click="atualizar(operator)">Atualizar</button></td>
  <td><button ng-click="deletar(operator)">Deletar</button></td>
</tr>

In the respective column you inform the typescript method that you will call to make your update or delete, in the method will have your http request calling the put or delete. And since the buttons are inside your ng-for, you pass the chosen operator from the table.