Question

好的，我会解释我的问题。我是从Angular开始的，这是我第一次使用REST API，因此有些事情可以逃脱。

就我而言，我在Typescript和C#中使用了一个Period对象，它们是：

期间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() { }
  }

直到那时，我还是设法通过Postman从数据库中恢复数据。

邮递员：GET -> https://localhost:5001/api/period/GetAllPeriods

[
  {
     "id": 122,
     "year": "2019",
     "month": "03",
     "blocked": false
  },
  {
     "id": 121,
     "year": "2019",
     "month": "02",
     "blocked": false
  }, ...
]

我做了一些研究和测试，下面的代码起作用了。我检索JSON数据，并将其转换为Typescript的Period对象列表。然后，我在页面上显示它们，一切正常。

但是在Angular documentation上，写成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.');
  };
}

为清楚起见，我从API获取了JSON数据，但是当我使用HttpClient服务时，浏览器控制台中会出现一条错误消息，因为它找不到仍可访问的数据。因此，我认为我的问题来自HttpClient的服务。

如果您有想法，我很感兴趣。预先谢谢你。

Answer 1

好几天以来，我一直在解决这个问题，一旦提出问题，我便找到了解决方法...

我的问题是：import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';

事实证明，要开发我的应用程序，我开始使用HttpClientInMemoryWebApiModule。但是此模块与HttpClient不兼容。必须使用HttpClient将其删除。

现在我的应用程序可以正常工作并显示数据。

Answer 2

在您的组件中，当您调用方法getPeriods（）时，请在其中添加订阅，因为它返回了可观察的类型。

this.getPeriods（）。subscribe（Response => {console.log（Response）}）;

使用Angular

2 个答案: