Call delete on angle 6

0

I have this HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover">
                <caption>Lista de Operadores</caption>
                <thead class="thead-dark">
                    <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>
                        <!-- <td><button ng-click="atualizar(operator)" class="btn btn-primary">Atualizar</button></td>
                        <td><button ng-click="deletar(operator)" class="btn btn-primary">Deletar</button></td> -->
                        <td><fa name="pencil" ng-click="update(operator)"></fa></td>
                        <td><fa name="times" ng-click="delete(operator)"></fa></td>
                    </tr>
                </tbody>
            </table>     
        </div>
    </div>
</div>

In this table, I have an icon that I call Component in the delete method. See my service

@Injectable({
  providedIn: 'root'
})
export class OperatorService {

  private actionUrl: string;

    constructor(private http: HttpClient, private _configuration: Configuration) {
        this.actionUrl = _configuration.ServerWithApiUrl + 'Operators/';
    }



  public delete<T>(id: number): Observable<T> {
      return this.http.delete<T>(this.actionUrl + id);
  }
}

@Injectable()
export class CustomInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        console.log(JSON.stringify(req.headers));
        return next.handle(req);
    }
}

What should I do in my Component to call this method and run delete from the registry? My Component as it is now (without the delete call, because that's the reason for the post)

export interface getOperator{
  Id: string;
  Name: string;
}

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css'],
  providers: [OperatorService]
})

export class OperatorsComponent implements OnInit {

   displayedColumns: string[] = ['codigo', 'nome'];
   private operUrl: 'api/Operators';

    public message: string;
    public dataSource: Model.Itens[];

    constructor( private _operService: OperatorService) 
    {
      setTheme('bs3'); 
    }    

  ngOnInit() {  

    this._operService
      .getAll<Model.Result<Model.Itens>>()
      .subscribe((data: Model.Result<Model.Itens>) => {
        debugger;
        this.dataSource = data.itens;
      });
  }
}
    
asked by anonymous 20.07.2018 / 18:57

1 answer

0

So I solved, with this Component:

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css'],
  providers: [OperatorService]
})

export class OperatorsComponent implements OnInit {

  displayedColumns: string[] = ['codigo', 'nome'];
  private operUrl: 'api/Operators';

  public message: string;
  public dataSource: Model.Itens[];
  createForm :FormGroup;

  constructor(private _operService: OperatorService) {
  }

  ngOnInit() {

    this.onGet();
  }

  onDelete(operator: Model.Itens) {
    debugger;
    if (confirm('Deseja excluir o operador: ' + operator.name + '?')) {

      this._operService
        .delete<any>(operator.operatorId)
        .subscribe((res) => {
          this.onGet();
        });
    }
  }

  onGet() {
    this._operService
      .getAll<Model.Result<Model.Itens>>()
      .subscribe((data: Model.Result<Model.Itens>) => {
        debugger;
        this.dataSource = data.itens;
      });
  }

And in html in TD I call the onDelete method

    
20.07.2018 / 21:26