404 не найдена ошибка при отправке запроса на удаление из проекта angular 5 в .net web api

Question

Я получаю сообщение "DELETE http://localhost:51352/api/Account/undefined 404 (Not Found)" при отправке запроса на удаление из angular 5 в .net web api.

Вот мой user.component.ts вangular

 delete(id){
  this.spinner.show();
  this._userService.deleteUser(id).subscribe(() => {
  this.spinner.hide();
  this.toastr.successToastr('User registration successful');
  this._messageService.clear('c');
  this.getUser();
}, err => this.spinner.hide()); }

Вот моя функция deleteUser в файле user.service.ts.

deleteUser(Id: string){
  return this.http.delete(this.remoteServerBaseUrl + '/api/Account/' + Id)
}

}

export class UserListDto {
  Id: string;
  UsernName : string;
  Email : string;
  FirstName : string;
  LastName : string;
}

export class UserEditDto {
  Id : string;
  UserName : string;
  Email : string;
  FirstName : string;
  LastName : string;
}

Вот мой users.component.html файл.

<ng-template pTemplate="body" let-data>
          <tr>
            <td>
              <div class="btn-group" dropdown>
                <button dropdownToggle type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-cog"></i>&nbsp;Actions&nbsp;<i class="caret"></i>
                </button>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                    <li role="menuitem"><a class="dropdown-item" (click)="edit(user.id)"><i class="fa fa-edit"></i> Edit</a></li>
                    <!-- <li role="menuitem"><a class="dropdown-item" (click)="resetPassword(user)"><i class="fa fa-redo"></i> Reset Password</a></li> -->
                    <li role="menuitem"><a class="dropdown-item" (click)="delete(user.Id)"><i class="fa fa-trash"></i> Delete</a></li>
                </ul>
              </div>
            </td>
            <td *ngFor="let col of cols">{{col.type ? col.type.transform(data[col.field], col.arg1, col.arg2, col.arg3, col.arg4) : data[col.field]}}</td>
          </tr>
        </ng-template>

Вот мой файл WebApiConfig.cs в .Net.

 public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors(new EnableCorsAttribute("http://localhost:51352", headers: "*", methods: "*"));

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        // Apply camelCase notation
        var settings = config.Formatters.JsonFormatter.SerializerSettings;
        settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        settings.Formatting = Formatting.Indented;

        config.Filters.Add(new AuthorizeAttribute());
    }
}

Ваша помощь действительно будет оценена

Я обновил пользователя.Файл component.html.

<ul *dropdownMenu class="dropdown-menu" role="menu">
                    <li role="menuitem"><a class="dropdown-item" (click)="edit(data.id)"><i class="fa fa-edit"></i> Edit</a></li>
                    <!-- <li role="menuitem"><a class="dropdown-item" (click)="resetPassword(user)"><i class="fa fa-redo"></i> Reset Password</a></li> -->
                    <li role="menuitem"><a class="dropdown-item" (click)="delete(data.id)"><i class="fa fa-trash"></i> Delete</a></li>
                </ul>

После попытки сделать это на почтальоне.Api работает хорошо, поэтому я чувствую, что он исходит от углового приложения, не пропуская id. Изображение от почтальона ниже. Изображение от почтальона

Answer 1

Добавьте атрибут маршрута [Route("api/Account/{Id}")] к DeleteUser(string id) методу в вашем контроллере, чтобы параметр id можно было прочитать из api url

Также Вам необходимо отправить Id в виде строки в api

Функция обновления deleteUser в файле user.service.ts, как показано ниже

return this.http.delete(`${this.remoteServerBaseUrl}/api/Account/"${Id}"`')

Answer 2

В вашем файле user.component.html есть ошибка опечатки в верхнем регистре.

Вы передаете user.Id вместо user.id компоненту delete.

The *Свойство 1008 *, вероятно, не определено в вашем user объекте.