У меня проблемы с отправкой HTTP-запроса из диалогового окна в угловом 6.
Сначала о ситуации: я нажимаю кнопку и открываю первый диалог, в этом диалоге я нажимаю кнопку и открываю второй диалог.Во втором диалоге я заполняю некоторые входные данные и нажимаю кнопку Отправить.Но когда я нажимаю кнопку Отправить, у меня появляется следующая ошибка .
И я не знаю, что я делаю не так, потому что из примеров отправки HTTP-вызовов все выглядит нормально.
Как видите, проблема в функции sendOffer () во втором диалоге (нажав кнопку Отправить в диалоговом окне) при вызове функции addUserOfferMapping () из useroffremappingService.
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);
}))
}
}