Хорошо, я объясню свою проблему. Я начинаю с Angular, и это первый раз, когда я делаю REST API, поэтому что-то может ускользнуть от меня.
В моем случае я использую объект Period в Typescript и в C#, вот они:
Период TS:
export class Period {
id: number;
year: string;
month: string;
blocked: boolean;
constructor(id: number, year: string, month: string, blocked: boolean) {
this.id = id;
this.year = year;
this.month = month;
this.blocked = blocked;
}
}
Период C #:
public class Period
{
[JsonProperty(PropertyName = "id")]
public int ID { get; set; }
[JsonProperty(PropertyName = "year")]
public string Year { get; set; }
[JsonProperty(PropertyName = "month")]
public string Month { get; set; }
[JsonProperty(PropertyName = "blocked")]
public bool Blocked { get; set; }
public Period() { }
}
До этого мне удавалось восстанавливать данные из моей базы данных через почтальона.
Почтальон: GET -> https://localhost:5001/api/period/GetAllPeriods
[
{
"id": 122,
"year": "2019",
"month": "03",
"blocked": false
},
{
"id": 121,
"year": "2019",
"month": "02",
"blocked": false
}, ...
]
Я провел несколько исследований и несколько тестов, и приведенный ниже код работает.
Я извлекаю свои JSON данные, которые я преобразую в список объектов Period в Typescript.
Затем я отображаю их на своей странице, и все работает правильно.
Но в Angular документации написано, что Http устарело и что лучше использовать HttpClient.
period.service.ts: http
export class PeriodService {
constructor(private http: Http) { }
//Http
getPeriods(): Observable<Period[]> {
return this.http.get('/api/period/GetAllPeriods')
.pipe(
catchError(this.handleError),
map(response => {
const periods = response.json();
return periods.map((period) => new Period(period.id, period.year, period.month, period.blocked));
})
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
console.error(error);
}
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
};
}
Итак, я попытался использовать HttpClient.
Однако я не могу восстановить данные в моем сервисе.
period.service.ts: HttpClient
export class PeriodService {
constructor(private http: HttpClient) { }
//HttpClient
getPeriods(): Observable<Period[]> {
return this.http.get<Period[]>('https://localhost:5001/api/period/GetAllPeriods')
.pipe(
catchError(this.handleError)
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
console.error(error);
}
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
};
}
Чтобы быть более точным, я получаю данные JSON от API, но когда я использую сервис HttpClient, в консоли браузера появляется сообщение об ошибке, поскольку он не может найти данные, которые еще доступны.
Итак, я думаю, что моя проблема связана с обслуживанием с HttpClient.
Если у вас есть идеи, мне это интересно.
Заранее спасибо.