Angular2 Response not casting

I am making a call to my backend server (Spring Boot) and it returns a list of objects Foo.

However, when I go to list my objects in *ngFor it doesn’t iterate at all. I know my server is return a list of two objects, as I have debugged it, and the response back is an array of two objects. I think I am missing a silly step, and any help is greatly appreciated.

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))
}

And this I know returns an array of two objects, as show in the last step of my chain.

@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);
    }
}

and my foo.component.html

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

I get nothing to show, except for test (which is outside of my for block)

and if it helps here is the backend

FooController.java

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

and Foo.java

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

and the <head> in my html file

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

And the JSON response back from the server is

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

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

I guess you should remove angular1 reference: <script src="node_modules/angular/angular.min.js"></script>, if it still does not help compare your script order and module versions with angular2-quickstart sample.

Jason
Guest

Change your foos declaration to

foos:Foo[] = [];

This is a guess as you have not shown an error message, but I have seen this behavior with an uninitialized collection.

If not, are there any errors reported in the console?

Jason
Guest

If you get the data in the JavaScript code, perhaps you forgot to include the angular2-polyfills.js into your main HTML file. This contains ZoneJS that is responsible to trigger the change detection. The latter will update the view accordingly.

Here is the line:

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

See this link for more details: