1

Tenho esse 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>

Nessa table, na eu tenho um ícone que chamo no minha Component o método delete. Veja minha 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);
    }
}

O que eu devo fazer na minha Component para chamara esse método e executar o delete do registro? Minha Component como está agora(sem a chamada do delete, pois essa é a razão do 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;
      });
  }
}
2
  • Não seria só instanciar o serviço no construtor (e adicionar os imports) e chamar o método delete? No click do ícone ng-click="delete(operator)" você poderia passar direto o id em vez de todo o objeto
    – Costamilam
    Commented 20/07/2018 às 17:04
  • Opa, já resolvi isso. Vou postar minha Component
    – pnet
    Commented 20/07/2018 às 17:29

1 Resposta 1

0

Assim resolvi, com esse 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;
      });
  }

E no html na TD eu chamo o método onDelete

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .