cannot delete in MEAN Stack - Angular 13 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'

Question

I'm tryring to delete a employee from a collection but it throw me this error

Error

Error: src/app/components/employee/employee.component.html:72:68 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.

72 <button class="btn btn-danger" (click)="deleteEmployee(employee._id)">

employee.model.ts

export interface Employee {
    name: string,
    office: string,
    position: string,
    salary: number,
    createdAt?: string,
    updatedAt?: string,
    _id?: string
}

employee.component.ts

deleteEmployee(_id: string){
    if (confirm('Are you sure you want to delete it?')){
      this.employeeService.deleteEmployee(_id).subscribe({
        next: (res)=>{
          this.getEmployees();
        },
        error: (e)=> console.log(e)
      })
    }
  }

employee.component.html

<tbody>
        <tr *ngFor="let employee of employeeService.employees">
          <td>{{ employee.name }}</td>
          <td>{{ employee.position }}</td>
          <td>{{ employee.office }}</td>
          <td>{{ employee.salary }}</td>
          <td>
            <button class="btn btn-secondary mr-2">
              <i class="material-icons">edit</i>
            </button>
            <button class="btn btn-danger" (click)="deleteEmployee(employee._id)">
              <i class="material-icons">delete</i>
            </button>
          </td>
        </tr>
      </tbody>

employee.service.ts

deleteEmployee( _id: string){
    return this.http.delete(`${this.URL_API}/${_id}`)}

Server Side - employees.controller.js

employeeCrtl.deleteEmployee = async (req, res) => {
    await Employee.findByIdAndDelete(req.params.id)
    res.json({status: 'Employee Deleted'})
}

Employee.js


const employeeSchema = new Schema({
    name: {type: String, required: true},
    position: {type: String, required: true},
    office: {type: String, required: true},
    salary: {type: Number, required: true},
}, {
    timestamps: true,
    versionKey: false
})

module.exports = model("Employee", employeeSchema);

score 0 · Answer 1 · answered Jan 07 '22 at 06:11

The problem was from here. When you declare id?, which means id is an optional variable and has the type T | undefined.

export interface Employee {
    ...
    _id?: string
}

To solve it, you have to remove the question mark from id.

export interface Employee {
    ...
    _id: string
}

cannot delete in MEAN Stack - Angular 13 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'

Error

1 Answers1