angular - Angular 6 与 .NET Core API 的绑定

Question

需要我从早上开始工作的帮助。

我做了什么 ：

1. 从 Firebase 获取列表时，我可以将列表绑定到 UI。
2. 我还可以连接“ https://jsonplaceholder.typicode.com ”并将列表绑定到 UI。

为什么/我需要你的帮助：

但我不知道为什么我无法将 .NET Core API 的列表绑定到 Angular 6。

笔记：-

1. 我的 API 正在工作，我确信因为我已经用邮递员和招摇过的人对其进行了测试。
2. 能够访问 API 并从 .NET Core API 获得响应，但无法将其映射或绑定到我声明为“任何”类型的角度变量。好像我无法从响应中获取数据。

我已经尝试了很多例子，但直到现在还没有运气。下面是我在 Angular 6 项目中所做的代码。

##ToDoService.ts 文件代码

import { Injectable, Inject } from '@angular/core';
import {environment } from "../../environments/environment"
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class ToDoService {
  myAppUrl: string = environment.url;

  constructor(private _http: HttpClient) {
  }
  getToDoList() {
    return this.GetMethod();
  }  

  GetMethod()  : Observable<any> {
    console.log("called");
       var headers = new HttpHeaders();
       headers.append('Content-Type', 'application/json');
       headers.append('Access-Control-Allow-Origin', '*');
       headers.append('Access-Control-Allow-Methods', '*');
       headers.append('Access-Control-Allow-Headers', '*');

       console.log('calling viju method');
       console.log(headers);
       var result = this._http.get(this.myAppUrl,{headers:headers})
       .map((response: Response) => response.json());

       return result;
  }

}

##ToDoComponent.ts 文件代码

import { Component } from '@angular/core';
import { ToDoService } from './service/to-do.service'
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ToDo';
  ToDolist : any[];
  ToDoForm : FormGroup;
constructor(private _fb : FormBuilder, private _service : ToDoService ){

  this.ToDoForm = this._fb.group({
    ToDoId: 0,
    Content: new FormControl(),
    Status: new FormControl(),
  });

  this.getToDoList();
}

  getToDoList(){
    // debugger;
    this._service.getToDoList()
    .subscribe(res=> this.ToDolist = res);
    debugger;
    console.log(this.ToDolist);
  }
}

请检查以下错误屏幕截图。

标签： angulartypescriptangular6

Answer 1

除了评论中确定的问题...

如果您使用的是 Angular v6，那么您的 Observable 导入不正确。（除非您使用的是向后兼容库？）

以下是 RxJS v6 的导入语句：

import { Observable, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';

看来您正在混合旧 Http的和新 HttpClient的代码。

旧的Http需要.json(). 新的HttpClient自动为您执行所需的映射。

我的获取代码如下所示：

  getMovies(): Observable<IMovie[]> {
    return this.http.get<IMovie[]>(this.moviesUrl);
  }

或者使用控制台日志和异常处理，如下所示：

  getMovies(): Observable<IMovie[]> {
    return this.http.get<IMovie[]>(this.moviesUrl)
      .pipe(
        tap(data => console.log(JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

此外，由于 Http 调用是异步的，因此您不能在调用后立即对其进行 console.log。它们将是未定义的。您需要在订阅中移动您的日志。

  getToDoList(){
    // debugger;
    this._service.getToDoList()
    .subscribe(res=> {
         this.ToDolist = res;
         debugger;
         console.log(this.ToDolist);
    });
  }