Angular 2: Populate checkbox list with HTTP response

Question

I am using Angular 2 for my web application. Now I am trying to populate a checkbox list from backend service call. This is what I am trying.

main.ts

import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';

import {DataService} from './service'
import {AppComponent}     from './app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS,HTTP_PROVIDERS,DataService]);

service.ts

import {Http, Response} from 'angular2/http'
import {Injectable} from 'angular2/core'

@Injectable()
export class DataService {

  http: Http;
  constructor(http: Http) {
    this.http = http;
  }

  getCheckboxList() {
    return this.http.get('http://localhost:8080/test/getList').map((res: Response) => res.json());
  }

}

checkbox.ts

import {Component} from 'angular2/core';
import {DataService} from '../service';

@Component({
  templateUrl: 'views/checkboxlist.html'
})

export class CheckboxComponent {
  message = "hello";
  constructor(dataService: DataService) {
    dataService.getCheckboxList().subscribe(function(res) {
        console.log(res.result);
        this.list = res.result;
        console.log(this.list);

    })
  }
}

checkboxlist.html

<div>
  <label *ngFor="#item of list">
    <input type="checkbox">{{item.value}}
  </label>
</div>

Backend service is successful and returns a response and line console.log(this.list); prints an object array (HTTP response). Although, it doesn't display the checkbox list and there is not any error on the console log.

Does anyone have any idea what's wrong with my code?

Thank You

Thierry Templier · Accepted Answer · 2016-04-18 07:22:48Z

2

You should use an arrow function in your component to be able to use the lexical this. In this case, the this keyword will correspond to the instance of the component. In your case, you use a "normal" function and the this keyword used in it doesn't correspond to the component instance...

dataService.getCheckboxList().subscribe((res) => { // <--------
    console.log(res.result);
    this.list = res.result;
    console.log(this.list);

})

See this plunkr: https://plnkr.co/edit/r1kQXlBVYvuO5fvQJgcb?p=preview.

See this link for more details:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

edited Apr 18, 2016 at 7:22

answered Apr 18, 2016 at 7:16

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rose18 Over a year ago

constructor(private dataService: DataService) { this.dataService.getCheckboxList().subscribe((res) => { console.log(res.result); this.list= res.result; console.log(this.list); }) }When I use above code segment it gives a compile error as Property 'list' does not exist on type 'CheckboxComponent'

Rose18 Over a year ago

It's working.. needed to add selector under @Component

Thierry Templier Over a year ago

You need to add explicitly a property to your CheckboxComponent class to remove the error. Something like that: private list:{value:string};.

Günter Zöchbauer · Accepted Answer · 2016-04-18 07:09:31Z

0

I would expect an error message in the browser console

Try the safe-navigation ?.

<input type="checkbox">{{item?.value}}

answered Apr 18, 2016 at 7:09

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

Günter Zöchbauer Over a year ago

You also need to apply the change proposed by Thierry.

Collectives™ on Stack Overflow

Angular 2: Populate checkbox list with HTTP response

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related