Edit table in Angular 6

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.

    
asked by anonymous 17.07.2018 / 19:28

1 answer

2

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.

    
17.07.2018 / 22:45