Angular 6 无法编译，服务出错

Question

我是 ti Angular 6 的新手，但我使用得越多，它就越有意义。

我的连接数据库的服务有问题

这是我在 Angular CLI 中尝试 ng serve

时收到的错误消息

ERROR in src/app/services/site.service.ts(29,5): error TS2322: Type 'Observable' is not assignable to type 'Observable'.
Type 'ISite' is not assignable to type 'ISite[]'. Property 'includes' is missing in type 'ISite'.

这是我的界面

export interface ISite {
  id: string,
  siteName: string,
  developer: string,
  siteAddress: string,
  siteAddress2: string,
  siteCity: string,
  siteCounty: string,
  sitePostcode: string,
}

这是我的服务。

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { ISite } from './../interfaces/site';
import { throwError as observableThrowError, Observable } from 'rxjs'
import { catchError } from 'rxjs/operators'

@Injectable({
  providedIn: 'root'
})
export class SiteService {

  private _url: string = "http://localhost/lumen/public/sites";

  constructor(private http: HttpClient) { }

  getSites(): Observable<ISite[]> {
    return this.http.get<ISite[]>(this._url)
               .pipe(catchError(this.errorHandler));
  }

  getSite(id: string): Observable<ISite> {
    let url = `${this._url}/${id}`;
    return this.http.get<ISite>(url)
               .pipe(catchError(this.errorHandler));
  }

  getDeveloperSites(id: string): Observable<ISite[]> {
    let url = `${this._url}/developer/${id}`;
    return this.http.get<ISite>(url)
           .pipe(catchError(this.errorHandler));
  }

  errorHandler(error: HttpErrorResponse) {
    return observableThrowError(error.message || "Server Error");
  }
}

我已经检查了从数据库返回的内容是否与界面所期望的相匹配并且它们匹配。

Answer 1

getDeveloperSites returns Observable<ISite[]>，但是 http.get 被赋予类型 ISite（没有 []）。将您的代码更改为以下内容，它应该可以工作：

getDeveloperSites(id: string): Observable<ISite[]> {
    let url = `${this._url}/developer/${id}`;
    return this.http.get<ISite[]>(url)
           .pipe(catchError(this.errorHandler));
  }

Angular 6 无法编译，服务出错

Angular 6 cannot compile with error in service

angular-services

angular6