Angular 角度6:can'；t从第二个对话框发送HTTP POST请求

在angular 6中，我无法从对话框窗口发送HTTP请求

首先关于情况：我点击按钮打开第一个对话框，在这个对话框中我点击按钮打开第二个对话框。在第二个对话框中，我填写一些输入数据，然后单击“发送”按钮。但当我点击“发送”按钮时，我有了下一步

我不知道我做错了什么，因为从发送HTTP调用的示例来看，一切都很好

正如您所看到的，当从useroffremappingService调用函数addUserOfferMapping（）时，问题出现在第二个对话框中的函数sendOffer（）中（单击按钮Send in dialog）

employeeinfodialog.component.ts（这是第二个对话框窗口）：

从'@angular/core'导入{Component，Inject，Input，OnInit}；
从“@angular/material/DIALOG”导入{MAT_DIALOG_DATA，MatDialogRef}”；
从“../../\u models/UserOfferMapping”导入{UserOfferMapping}”；
从“../../\u models/Userrole”导入{Userrole}；
从“../../\u services/userrole.service”导入{UserroleService}”；
从“../../\u services/useroffermapping.service”导入{UseroffermappingService}”；
从“./projectInfo对话框/projectInfo对话框.component”导入{projectInfo对话框组件}；
@组成部分({
选择器：“employeeinfodialog”，
templateUrl:'./employeeinfodialog.component.html'，
样式URL:['./employeeinfodialog.component.css']
})
导出类EmployeeinfodialogComponent实现OnInit{
公共用户信息；
公共用户项目映射；
公共项目；
公共角色：Userrole[]；
公开发售：UserOfferMapping={
fromdate:null，
机会：空，
百分比：空，
roleId:null，
userId:null，
projectId:null
};
构造函数（@Inject（MAT_DIALOG_DATA）公共数据：any，private userroleService:userroleService，private useroffremappingService:UseroffermappingService，private dialogRef:MatDialogRef）{}
异步getRoles（）{
this.roles=等待this.userroleService.getAllRoles（）.toPromise（）；
console.log（this.roles）；
}
公开发售（）{
控制台日志（“fgfg”）；
console.log（this.offer）；
this.useroffremappingService.addUserOfferMapping（this.offer）.subscribe（值=>{
控制台日志（“dfd”）；
this.dialogRef.close（）；
});
}
恩戈尼尼特（）{
this.userinfo=this.data.userinfo；
this.userprojectmapping=this.data.userprojectmapping；
this.projects=this.data.projects；
这个.getRoles（）；
this.offer.userId=this.userinfo.id；
console.log（this.userinfo）；
log（this.userprojectmapping）；
console.log（this.projects）；
}
}

employeeinfodialog.component.html：

<h1 mat-dialog-title>Suggest participant in another project?</h1>
<div mat-dialog-content>
  <p>{{this.userinfo.firstname}} {{this.userinfo.lastname}}</p>
<!--  project-->
  <mat-form-field>
    <mat-label>Project name</mat-label>
    <mat-select [(ngModel)]="this.offer.projectId">
      <mat-option name="select-project" *ngFor="let project of this.projects" [value]="project.id" >
        {{project.kurzname}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label>From date</mat-label>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="this.offer.fromdate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
<!--  percent-->
  <mat-form-field class="example-full-width">
    <mat-label>Percent</mat-label>
    <input matInput placeholder="Type percent" type="number" [(ngModel)]="this.offer.percent">
  </mat-form-field>
<!--  role-->
  <mat-form-field>
    <mat-label>Role</mat-label>
    <mat-select [(ngModel)]="this.offer.roleId">
      <mat-option
        name="select-roles"
        *ngFor="let role of this.roles"
        [value]="role.id"
        matTooltip="{{role.description}}"
        matTooltipPosition="right"
      >
        {{role.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
<!--  chance-->
  <mat-form-field class="example-full-width">
    <mat-label>Chance</mat-label>
    <input matInput placeholder="Type chance" type="number" min="0" max="100" [(ngModel)]="this.offer.chance">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
  <button mat-button (click)="sendOffer()">Send</button>
</div>

建议其他项目的参与者？
{{this.userinfo.firstname}{{{this.userinfo.lastname}}

项目名称
{{project.kurzname}
从日期开始
百分比
角色
{{role.name}
机会
接近
发送

useroffermapping.service.ts：

import {Injectable} from "@angular/core";
import {environment} from "../../environments/environment";
import {HttpClient} from "@angular/common/http";
import {UserService} from "./user.service";
import {Observable} from "rxjs";
import {UserOfferMapping} from "../_models/UserOfferMapping";

@Injectable({
  providedIn: 'root'
})
export class UseroffermappingService {
  private addUserOfferMappingUrl = environment.apiUrl + 'api/userofferwebservices/addUserOfferMapping';

  constructor(private http: HttpClient, private userservice: UserService) { }

  public addUserOfferMapping(offer: UserOfferMapping) : Observable<any> {
      const data = {
        userId: offer.userId,
        projectId: offer.projectId,
        roleId: offer.roleId,
        fromdate: offer.fromdate as Date,
        percent: offer.percent,
        chance: offer.chance,
      };

      return this.http.post(this.addUserOfferMappingUrl, data, this.userservice.getRequestOptions());
  }
}

从“@angular/core”导入{Injectable}；
从“../../environments/environment”导入{environment}”；
从“@angular/common/http”导入{HttpClient}；
从“/user.service”导入{UserService}；
从“rxjs”导入{observeable}；
从“./_models/UserOfferMapping”导入{UserOfferMapping}”；
@注射的({
providedIn:'根'
})
导出类UseroffermappingService{
私有addUserOfferMapping=environment.apiUrl+“api/userofferwebservices/addUserOfferMapping”；
构造函数（私有http:HttpClient，私有userservice:userservice）{}
public addUserOfferMapping（offer:UserOfferMapping）：可观察{
常数数据={
userId:offer.userId，
projectd:offer.projectd，
roleId:offer.roleId，
fromdate:offer.fromdate作为日期，
百分比：报价。百分比，
机会，机会，
};
返回this.http.post（this.addUserOfferMappingGurl，data，this.userservice.getRequestOptions（））；
}
}

UPD：

error.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {UserService} from "../_services/user.service";


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private loginService: UserService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.loginService.logout();
                location.reload(true);
            }
            const error = err.error.message || err.statusText;

            return throwError(error);
        }))
    }
}

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {UserService} from "../_services/user.service";


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private loginService: UserService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.loginService.logout();
                location.reload(true);
            }
/* Change to this and see in console error about bad configured URL
            let error;
            console.log(err);
            if (err.error) {
              error = err.error.message || err.statusText;
            } else {
              error = err.statusText;
            }
*/
            return throwError(error);
        }))
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpRequest，HttpHandler，HttpEvent，HttpInterceptor}；
从“rxjs”导入{observatable，throwerr}；
从“rxjs/operators”导入{catchError}；
从“./_services/user.service”导入{UserService}”；
@可注射（）
导出类ErrorInterceptor实现HttpInterceptor{
构造函数（私有登录服务：用户服务）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
返回next.handle（request）.pipe（catchError（err=>{
如果（错误状态===401）{
//如果api返回401响应，则自动注销
this.loginService.logout（）；
位置。重新加载（true）；
}
const error=err.error.message | | err.statusText；
返回投掷器（错误）；
}))
}
}

感谢@r-richards和@mazbeye的帮助！我发现了错误，问题是拦截器不正确地捕获了错误，并且我没有看到这个HTTP请求的URL配置错误！ error.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {UserService} from "../_services/user.service";


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private loginService: UserService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.loginService.logout();
                location.reload(true);
            }
            const error = err.error.message || err.statusText;

            return throwError(error);
        }))
    }
}

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {UserService} from "../_services/user.service";


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private loginService: UserService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                this.loginService.logout();
                location.reload(true);
            }
/* Change to this and see in console error about bad configured URL
            let error;
            console.log(err);
            if (err.error) {
              error = err.error.message || err.statusText;
            } else {
              error = err.statusText;
            }
*/
            return throwError(error);
        }))
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpRequest，HttpHandler，HttpEvent，HttpInterceptor}；
从“rxjs”导入{observatable，throwerr}；
从“rxjs/operators”导入{catchError}；
从“./_services/user.service”导入{UserService}”；
@可注射（）
导出类ErrorInterceptor实现HttpInterceptor{
构造函数（私有登录服务：用户服务）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
返回next.handle（request）.pipe（catchError（err=>{
如果（错误状态===401）{
//如果api返回401响应，则自动注销
this.loginService.logout（）；
位置。重新加载（true）；
}
/*更改为此，并在控制台中查看有关错误配置URL的错误
让错误；
控制台日志（err）；