Я создал приложение стека MEAN, которое выполняет основную c работу по вставке, удалению, обновлению и просмотру данных из mongoDB. Прежде всего, я клонировал это приложение стека MEAN из GitHub. приложение было основано на сотруднике, но я переименовал все компоненты, маршрутизация и т. д. c с «сотрудник» на «датчик». то, что я сделал буквально, изменило слово «сотрудник» на «датчик». и у меня не было проблем при компиляции кода. Сборка прошла успешно. но когда я запустил localhost: 4200, правильно отобразилась первая страница, которая является компонентом вставки. данные вставляются в mongodb. поэтому этот компонент не имеет проблем. но когда я нажимаю на компонент датчика вида, он показывает пустую страницу. поэтому, когда я проверил консоль chrome, нажав f12, он показал список ошибок. пожалуйста, проверьте ошибки на скриншоте ниже. 4
код service.api ниже
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import { Observable } from 'rxjs/Observable';
import { catchError, map } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
baseUri:string = 'http://localhost:4000/api';
headers = new HttpHeaders().set('Content-Type', 'application/json');
getSensors: any;
constructor(private http: HttpClient) { }
// Create
createSensor(data): Observable<any> {
let url = `${this.baseUri}/create`;
return this.http.post(url, data)
.pipe(
catchError(this.errorMgmt)
)
}
// Get Sensor
getSensor(id): Observable<any> {
let url = `${this.baseUri}/read/${id}`;
return this.http.get(url, {headers: this.headers}).pipe(
map((res: Response) => {
return res || {}
}),
catchError(this.errorMgmt)
)
}
// Update Sensor
updateSensor(id, data): Observable<any> {
let url = `${this.baseUri}/update/${id}`;
return this.http.put(url, data, { headers: this.headers }).pipe(
catchError(this.errorMgmt)
)
}
// Delete Sensor
deleteSensor(id): Observable<any> {
let url = `${this.baseUri}/delete/${id}`;
return this.http.delete(url, { headers: this.headers }).pipe(
catchError(this.errorMgmt)
)
}
// Error handling
errorMgmt(error: HttpErrorResponse) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// Get client-side error
errorMessage = error.error.message;
} else {
// Get server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
console.log(errorMessage);
return throwError(errorMessage);
}
}
SENSOR-LIST.COMPONENT.TS ниже
import { Component, OnInit } from '@angular/core';
import { ApiService } from './../../service/api.service';
@Component({
selector: 'app-Sensor-list',
templateUrl: './Sensor-list.component.html',
styleUrls: ['./Sensor-list.component.css']
})
export class SensorListComponent implements OnInit {
Sensor: any = [];
constructor(private apiService: ApiService) {
this.readSensor();
}
ngOnInit() {}
readSensor() {
this.apiService.getSensors.subscribe ((data) => {
this.Sensor = data;
});
}
removeSensor(Sensor, index) {
if (window.confirm('Are you sure?')) {
this.apiService.deleteSensor(Sensor._id).subscribe((data) => {
this.Sensor.splice(index, 1);
}
);
}
}
}
некоторые скриншоты img 1 2
img 2 3
img 3 4
, пожалуйста, помогите мне в этой проблеме