Angular2响应不投射答案

【问题标题】：Angular2 Response not castingAngular2响应不投射
【发布时间】：2016-08-03 17:52:30
【问题描述】：

我正在调用我的后端服务器 (Spring Boot)，它返回一个对象列表 Foo。

但是，当我在 *ngFor 中列出我的对象时，它根本不会迭代。我知道我的服务器返回一个包含两个对象的列表，因为我已经对其进行了调试，并且返回的响应是一个包含两个对象的数组。我想我错过了一个愚蠢的步骤，非常感谢任何帮助。

foo.ts

name: string;
id: number;
description: string;

list-foo.service.ts

@Injectable
export class ListFooService
constructor(private _http: Http) {}
private _getFooUrl = '/api/foos/foos';

getFoos() {
    return this._http.get(this._getFooUrl)
        .map(res => <Foo[]> res.json())
        .do(data => console.log(data))
}

我知道这会返回一个包含两个对象的数组，如我的链的最后一步所示。

@Component({
selector: 'foo-component',
templateUrl: 'app/templates/foo.component.html'
})


export class FooComponent implements OnInit {

constructor(private _listFooService:ListFooService) {
}

foos:Foo[];
errorMessage:string;

ngOnInit() {
    this.getFoos();
}

getFoos() {
    this._listFooService.getFoos()
        .subscribe(
            foos => {this.foos = foos; console.log("Foos"); console.log(this.foos)},
            error => this.errorMessage = <any>error);
    }
}

还有我的 foo.component.html

<ul>
<li *ngFor="#foo of foos">
    {{foo.name}}
</li>
</ul>
test

除了测试（在我的 for 块之外）之外，我什么都没有显示

如果有帮助，这里是后端

FooController.java

@RequestMapping("/connectors")
public @ResponseBody List<Foo> getFooList()
{
    return fooDAO.getAllFoos(); //this works
}

和 Foo.java

private String name;
private int id;
private String description;
//getters and setters

以及我的 html 文件中的 <head>

<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.min.js"></script>
<script src="node_modules/angular2/bundles/router.min.js"></script>
<script src="node_modules/angular2/bundles/upgrade.js"></script>
<script src="node_modules/angular2/bundles/http.min.js"></script>

从服务器返回的 JSON 响应是

[
 {
  "name": "Foo",
  "id": 1,
  "description": "FooBar"
 },
 {
   "name": "Foo2",
   "id": 2,
   "description": "FooBar2"
 }
]

【问题讨论】：

将ListFooService添加到组件的Providers中：providers: [ListFooService]
我已经尝试过了，得到了相同的结果:(谢谢
控制台有记录吗？
是的，它记录 [Object, Object]，当我展开它时，它会显示两个对象及其数据
嗯，你能不能做一个plunker？

标签： spring-boot angular

【解决方案1】：

如果您在 JavaScript 代码中获取数据，可能您忘记将 angular2-polyfills.js 包含到您的主 HTML 文件中。这包含负责触发更改检测的 ZoneJS。后者将相应地更新视图。

下面是一行：

<script src="node_modules/angular/bundles/angular2-polyfills.js"></script>

查看此链接了解更多详情：

https://angular.io/guide/quickstart

【讨论】：

我仔细检查了一下，它就在那里。我已经编辑了我的原始帖子以显示我正在使用的脚本

【解决方案2】：

我猜你应该删除 angular1 参考：<script src="node_modules/angular/angular.min.js"></script>，如果它仍然不能帮助将你的脚本顺序和模块版本与 angular2-quickstart 示例进行比较。

【讨论】：

就是这样！我需要 angular1，因为它是一个混合应用程序，但我删除了它，并将它作为 Angular 2 应用程序引导，它工作了！我知道路由器有混合问题，也许 http 也有问题，

【解决方案3】：

将您的 foos 声明更改为

foos:Foo[] = [];

这是一个猜测，因为您没有显示错误消息，但我已经看到了未初始化集合的这种行为。

如果没有，控制台是否报错？

【讨论】：

我仍然得到相同的结果。遗憾的是，控制台中没有错误。
你能贴一份服务器响应包的字符串副本吗？
[ { "name": "Foo", "id": 1, "description": "FooBar" }, { "name": "Foo2", "id": 2, "description ": "FooBar2" } ]