Question

我正在调用我的后端服务器（Spring Boot）并返回一个对象列表Foo。

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

foo.ts

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

列表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

除了测试（除了我的阻止之外）之外我什么都没有显示

如果它有帮助，那么就是后端

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"
 }
]

Answer 1

我想你应该删除angular1引用：<script src="node_modules/angular/angular.min.js"></script>，如果它仍然无法将你的脚本顺序和模块版本与angular2-quickstart样本进行比较。

Answer 2

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

以下是该行：

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

有关详细信息，请参阅此链接：

https://angular.io/guide/quickstart

Answer 3

将您的foos声明更改为

foos:Foo[] = [];

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

如果没有，控制台中是否有任何错误报告？

Angular2响应未投射

3 个答案: