Question

我无法以角度6从对话框窗口发送HTTP请求。

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

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

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

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

import {Component, Inject, Input, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {UserOfferMapping} from "../../_models/UserOfferMapping";
import {Userrole} from "../../_models/userrole";
import {UserroleService} from "../../_services/userrole.service";
import {UseroffermappingService} from "../../_services/useroffermapping.service";
import {ProjectinfodialogComponent} from "../projectinfodialog/projectinfodialog.component";

@Component({
  selector: 'employeeinfodialog',
  templateUrl: './employeeinfodialog.component.html',
  styleUrls: ['./employeeinfodialog.component.css']
})
export class EmployeeinfodialogComponent implements OnInit {
  public userinfo;
  public userprojectmapping;
  public projects;
  public roles: Userrole[];
  public offer: UserOfferMapping = {
    fromdate: null,
    chance: null,
    percent: null,
    roleId: null,
    userId: null,
    projectId: null
  };
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private userroleService: UserroleService, private useroffremappingService: UseroffermappingService, private dialogRef:MatDialogRef<ProjectinfodialogComponent>) { }

  async getRoles(){
    this.roles = await this.userroleService.getAllRoles().toPromise();
    console.log(this.roles);
  }

  public sendOffer(){
    console.log("fgfg");
    console.log(this.offer);
    this.useroffremappingService.addUserOfferMapping(this.offer).subscribe(value => {
      console.log("dfd");
      this.dialogRef.close();
    });
  }

  ngOnInit() {
    this.userinfo = this.data.userinfo;
    this.userprojectmapping = this.data.userprojectmapping;
    this.projects = this.data.projects;
    this.getRoles();
    this.offer.userId = this.userinfo.id;
    console.log(this.userinfo);
    console.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>

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

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

Answer 1

感谢@ 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);
            }
/* 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 6：无法从第二个对话框发送HTTP POST请求

1 个答案: