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;
});
}
}