如何读取未定义的属性“订阅”？

Question

我创建了一个 MEAN 堆栈应用程序，它执行插入、删除、更新和查看来自 mongoDB 的数据的基本工作。 首先，我从 github 克隆了这个 MEAN 堆栈应用程序。该应用程序基于员工，但我将所有组件、路由等从“员工”重命名为“传感器”。我所做的就是将“员工”这个词改为“传感器”。 而且我在编译代码时没有问题。 构建成功。 但是当我启动 localhost:4200 时，第一页显示正确，这是插入组件。数据被插入到 mongodb 中。所以这个组件没有问题。 但是当我点击查看传感器组件时，它显示一个空白页面。 因此，当我通过单击 f12 检查 chrome 控制台时，它显示了一个错误列表。 请检查以下截图中的错误。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 12

img 23

img 34

请帮我解决这个问题

Answer 1

getSensors 首先不是一个函数。您在ApiService 中将其声明为any 类型的变量。因此，如果您想要传感器列表。创建getSensors() 方法，该方法允许您通过为其指定的 URL 检索传感器列表