angular http.get 不工作

Question

这是我的服务 TS 文件：

import { Http } from "@angular/http";
import { Inject, Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class ListService {

constructor(private http: Http, @Inject('BASE_URL') private baseURL: string) {}

public getAllLists(): Observable<ListModel[]> {
    return this.http.get(this.baseURL + 'api/List/LoadLists').map(resp => resp.json());
}

}

export interface ListModel {
ListID: number;
ListType: string;
ListValue: string;
ListOrder: number;
}

这是我的组件 TS 文件：

import { Component, OnInit } from '@angular/core';
import { ListModel, ListService } from '../shared/list/list.service';

@Component({
selector: 'job-post',
templateUrl: './job-post.component.html',
styleUrls: ['./job-post.component.scss'],
providers: [ListService]
})

export class JobPostComponent implements OnInit {

private lists: ListModel[];
private listService: ListService;

constructor(listService: ListService) {
    this.listService = listService;
}

ngOnInit() {
    this.listService.getAllLists()
        .subscribe(lists => this.lists = lists);
    console.log(this.lists);
}

}

在我的 ngOnInit 事件中，this.lists 在控制台语句中返回为未定义，如果我在 "subscribe" 部分将鼠标悬停在它上面，它会显示 "illegal return statement"。但是，Chrome 说 "http.get" 本身正确返回，我可以看到当时的数据，所以我知道控制器方法没问题。

我简单地从组件 TS 文件本身进行了这项工作，但我认为最好将它分离到一个服务文件中，因为我需要来自多个地方的列表。

据我所知，我已经正确地遵循了所有教程，但显然我遗漏了一些东西。有什么想法吗？

Answer 1

HTTP 请求是异步的。您需要在订阅中写console.log。

ngOnInit() {
 this.listService.getAllLists()
  .subscribe(lists => {
    this.lists = lists;
    console.log(this.lists);
  }
}

您还需要使用 HttpClientModule in you app. HttpModule 已弃用。

angular http.get 不工作

angular http.get not working

http-get

typescript

asp.net-core

angular