Question

我在我的网络应用程序中使用Angular 2。现在我正在尝试从后端服务调用填充复选框列表。这就是我想要的。

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>

后端服务成功并返回响应和行 console.log（this.list）; 打印对象数组（HTTP响应）。虽然，它不显示复选框列表，并且控制台日志中没有任何错误。

有没有人知道我的代码有什么问题？

谢谢

Answer 1

您应该在组件中使用箭头功能才能使用词法。在这种情况下，this关键字将对应于组件的实例。在您的情况下，您使用“普通”函数，其中使用的this关键字与组件实例不对应...

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

})

请参阅此plunkr：https://plnkr.co/edit/r1kQXlBVYvuO5fvQJgcb?p=preview。

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

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

Answer 2

我希望浏览器控制台中出现错误消息

尝试安全导航SELECT patients.name FROM patients, visit WHERE patients.id = visit.fk_patients AND DATE_visit BETWEEN CURRENT_DATE - interval '2' year AND CURRENT_DATE - interval '1' year;

?.

Angular 2：使用HTTP响应填充复选框列表

2 个答案: