#arrays #json #angular #nestjs #angular-httpclient
Вопрос:
Я хочу заранее поблагодарить вас за вашу помощь. Я только что загрузил приложение Angular NestJS на сервер. Пользователи, электронные письма и роли не отображаются в таблице html. На вкладке «Сеть» и консоли я вижу 500 внутренних ошибок сервера. Я утешил обратный вызов ошибки в этом методе.UserService.subscribe (), чтобы это могло помочь. Но он отображает только [объект объекта].
Это так странно, потому что все остальное работает нормально. Я могу войти и выйти из системы, просмотреть данные профиля и список разрешений, а также зарегистрировать нового пользователя. На локальном сервере электронные письма и пользователи отображаются правильно, и все работает так, как ожидалось. Проблема появляется на живом сервере!!
Я также использовал обработку угловых ошибок и обнаружил, что ошибка в основном исходит от серверной части, а не от угловой. Ниже приведена возвращенная ошибка:
Серверная часть вернула код 500, тело было: [объект Объект]
Я понятия не имею об этой ошибке! Означает ли это, что ошибка в NestJS? Может быть, Тело ответа не соответствует формату JSON?
ошибка появляется на вкладке консоли
подробная информация о запросе/ответе
конечной точкой для UserService.ts является «/api/пользователи»
/* eslint-disable @nrwl/nx/enforce-module-boundaries */ /* eslint-disable no-restricted-imports */ /* eslint-disable @typescript-eslint/no-explicit-any */ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root', }) export abstract class RestService { abstract get endpoint(): string; constructor(protected http: HttpClient) {} all(page?: number): Observablelt;anygt; { let url = this.endpoint; if (page) { url = `?page=${page}`; } return this.http.getlt;anygt;(url); } create(data: any): Observablelt;anygt; { return this.http.post(this.endpoint, data); } sendEmail(data: any): Observablelt;anygt; { return this.http.post(this.endpoint, data); } get(id: number): Observablelt;anygt; { return this.http.getlt;anygt;(`${this.endpoint}/${id}`); } update(id: number, data: any): Observablelt;anygt; { return this.http.put(`${this.endpoint}/${id}`, data); } delete(id: number): Observablelt;voidgt; { return this.http.deletelt;voidgt;(`${this.endpoint}/${id}`); } } users.component.ts
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { User } from '../../../interfaces/user'; import { ScrollService } from '../../../scroll.service'; import { MailerMailingListService } from '../../../services/mailer-mailing-list.service'; import { UserService } from '../../../services/user.service'; @Component({ selector: 'symbiota-dashboard-users', templateUrl: './users.component.html', styleUrls: ['./users.component.css'], }) export class UsersComponent implements OnInit { users: User[] = []; emailList: string[] = []; page = 1; last_page!: number; checks = false; data = []; constructor( private userService: UserService, private mailerMailingListService: MailerMailingListService, private scrollService: ScrollService, public router: Router ) {} load(): void { this.userService.all(this.page).subscribe((res: any) =gt; { this.users = res.data; console.log(res.data); this.last_page = res.meta.last_page; }); } ngOnInit(): void { this.load(); //console.log('email list: ', this.emailList); } } users.component.html
lt;tbodygt; lt;tr *ngFor="let user of users; let i = index"gt; lt;td style="width: 2%"gt; lt;!-- lt;input type="checkbox" [checked]="checks" /gt; --gt; lt;input type="checkbox" [checked]="checks" id="i" (click)="onSelect($event, '')" /gt; lt;/tdgt; lt;td style="width: 2%"gt;{{ user.id }}lt;/tdgt; lt;tdgt;{{ user.firstName }}lt;/tdgt; lt;tdgt;{{ user.lastName }}lt;/tdgt; lt;tdgt;{{ user.email }}lt;/tdgt; lt;tdgt;will be added laterlt;/tdgt; lt;tdgt;{{ user.role.name }}lt;/tdgt; lt;tdgt; lt;button class="btn-delete" style="background-color: #18976b" [routerLink]="['/dashboard/users', user.id, 'edit']" gt; Edit lt;/buttongt; lt;button class="btn-delete" style="background-color: rgb(226, 73, 73)" (click)="delete($event, user.id, i)" gt; Delete lt;/buttongt; lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; Это тип возвращаемых данных, в которых я получаю ошибки. Он находится в файле NestJS. (user.service.ts) Я надеюсь, что это поможет, если кто-нибудь даст мне решение.
async paginate(page = 1, relations = []): Promiselt;PaginatedResultgt; { const { data, meta } = await super.paginate(page, relations); return { data: data.map((user) =gt; { const { password, ...data } = user; return data; }), meta, }; } Комментарии:
1. Можете ли вы опубликовать скриншот ошибки 500 от инспектора? с заголовками и телом запроса и ответа. Вы уверены, что URL-адрес или форматирование URL-адреса верны
2. Я не смог добавить само изображение, но я просто добавил ссылку на изображение вкладки консоли.
3. Я также добавил ссылку с подробным запросом/ответом
4. Ну, с локальным хостом все работает нормально, но живая версия не работает для какого-то пути. /api/пользователи , /api/электронные письма и /api/роли. Я думал, что метод get заблокирован на сервере, но когда я посещаю /api/роли/создаю, в нем перечислены все разрешения — что также является запросом get!
5. Вы уверены, что nginx настроен правильно? Вы пробовали отправить запрос почтальоном или каким-либо другим способом? Вы можете обойти ufw и попробовать запросить у почтальона напрямую ip-адрес/api/пользователей.