Update (Put) in my project does not write to BD (MongoDB)

I need to do an editing screen and I can not. See how my component is (I deleted the imports to save space)

@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;

  public form:any;


  constructor(private _operService: OperatorService, private builder: FormBuilder) {
  }

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

  initEditOperator(operator: any){
    operator.edit = true;
    this.form = this.builder.group({
      id: operator.id,
      name: operator.name
    });
  }

  checkEdit() {
    if (this.dataSource == null || this.dataSource.length == 0) return false;
      return this.dataSource.filter((item: any) => item.edit === true).length == 0;
  }

  onUpdate(){

    this._operService.update<Model.Result<Model.Itens>>(this.form.id, this.form.name)
    .subscribe(success =>{
        // if(success.Result){

        // }
      },
        error =>{
      } 
    );

  }
}

this is 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">
                        <form *ngIf="operator.edit != true">
                            <td>{{ operator.operatorId}}</td>
                            <td>{{ operator.name }}</td>
                            <td>
                                <fa *ngIf="checkEdit()" name="pencil" (click)="initEditOperator(operator)"></fa>
                            </td>
                            <td>
                                <fa *ngIf="checkEdit()" name="times" (click)="onDelete(operator)"></fa>
                            </td>
                        </form>
                        <div *ngIf="operator.edit === true">
                            <td> {{ operator.operatorId}}<input type="hidden" [(ngModel)]="operator.operatorId"></td>
                            <td> <input type="text" [(ngModel)]="operator.name"></td>
                            <td>
                                <fa name="save" (click)="onUpdate()"></fa>
                            </td>
                            <td>
                                <fa name="ban" (click)="operator.edit = null;"></fa>
                            </td>
                        </div>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

The HTML call is on (OnClick) = onUpdate ()

This is my service

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

  private actionUrl: string;

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

    public getAll<T>(): Observable<T> {
      return this.http.get<T>(this.actionUrl);
  }

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

  public add<T>(itemName: string): Observable<T> {
      const toAdd = JSON.stringify({ ItemName: itemName });

      return this.http.post<T>(this.actionUrl, toAdd);
  }

  public update<T>(id: string, itemToUpdate: any): Observable<T> {
      return this.http
          .put<T>(this.actionUrl + id, JSON.stringify(itemToUpdate));
  }

  public delete<T>(id: string): 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);
    }
}

My Model

declare namespace Model{
    export interface Result<T>{
        error: boolean,
        itens: Array<T>,
        message: string
    }

    export interface Itens{
        operatorId: string,
        name: string,
    }
}

I can see the changes on the screen and everything else, but when giving an F5 in the page, it comes back as it was, this is due to not writing to the database. I use MongoDB, but what's happening has nothing to do with mongo, so I have not added the mongo tag.

When I call the routine, debugging in the browser, I get this error

  

PUT link 404 (Not Found)