角度 7 - http get 返回空

Question

我正在尝试使用 Angular（SPA 模板）在 ASP.NET CORE 中从头开始创建我的项目。我创建了一个基本的 API 和表单，但在网络 -> 响应中接收数据时无法获取数据。这是我的代码

API 控制器

[HttpGet]
public IActionResult Get()
{
        var res = Json(UsersBAL.GetAll());
        return res;
}

角度组件

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../../Services/users.service';
@Component({
  selector: 'app-vehicle-form',
  templateUrl: './vehicle-form.component.html',
  styleUrls: ['./vehicle-form.component.css']
})
export class VehicleFormComponent implements OnInit {
  users: any;
  constructor(private usersService: UsersService) { }
  ngOnInit() {
this.usersService.getUsers().subscribe((data: any) => {
  this.users = data;
  console.log("Users : ",data);
 },
  error => {
    console.log(error)
  })
//console.log("Users : ",this.users);
 }
}

角度服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class UsersService {
  api_url = 'http://localhost:58508/api/';
  constructor(private http: HttpClient) { }
  getUsers() {
return this.http.get(this.api_url + 'Users')
.pipe(map((response: any) => response.json()))
.pipe(
  tap(_ => console.log('fetched users')),
catchError(this.handleError('getusers', []))
);
}
  private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {

  // TODO: send the error to remote logging infrastructure
  console.error(error); // log to console instead

  // TODO: better job of transforming error for user consumption
  console.log(`${operation} failed: ${error.message}`);

  // Let the app keep running by returning an empty result.
  return of(result as T);
};
  }
}

Answer 1

您不需要HttpClient 中的map(res => res.json())。它默认采用 JSON 并立即为您解析。

所以只需在服务中返回它：

getUsers() {
  return this.http.get(this.api_url + 'Users')
    .pipe(
      tap(_ => console.log('fetched users')),
    catchError(this.handleError('getusers', []))
  );

Answer 2

从get 方法中删除这一行.pipe(map((response: any) => response.json()))。

HttpClient 默认给出json 响应数据。

return this.http.get(this.api_url + 'Users')
// .pipe(map((response: any) => response.json())) -- not required
.pipe(
  tap(_ => console.log('fetched users')),
catchError(this.handleError('getusers', []))
);