我试图从一个宁静的api获取数据并用它填充数据表,但是当我这样做时,即使http请求状态为200,我从api获取的数据也不会显示在我的数据表中。>
这是我的组件:
export class MesAvisComponent implements OnInit {
mesAvis : {};
constructor(private router: Router, private avisService: AvisService) { }
ngOnInit() {
return this.avisService.getMesAvis().subscribe(data => {
this.mesAvis = data;
console.log(this.mesAvis);
});
}
public options = {
"ajax": this.mesAvis,
"iDisplayLength": 15,
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{"data": "id"},
{"data": "age"},
{"data": "sexe"}
],
"order": [[1, 'asc']]
}
public detailsFormat(d) {return `<table cell-padding="5" cell-spacing="0" border="0" class="table table-hover table-condensed">
<tbody><tr>
<td style="width:100px">Facteur:</td>
<td>${d.facteur}</td>
</tr>
</tbody>
</table>`
}
}
这是我的服务:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Headers, Http, HttpModule, Response} from '@angular/http';
import { HttpHeaders } from '@angular/common/http';
import { User } from '../classes/user.model';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
@Injectable()
export class AvisService {
private headers = new Headers({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + JSON.parse(sessionStorage.getItem('currentUser')).token
});
constructor(private http: Http){ }
getMesAvis(): Observable<any> {
return this.http.get('http://localhost:8080/mesavis',{headers: this.headers}).map(resp => resp.json());
}
}
这是HTML:
<sa-datatable [options]="options"
[detailsFormat]="detailsFormat"
tableClass="display projects-table table table-striped table-bordered table-hover"
width="100%">
<thead>
<tr>
<th></th>
<th>Id Avis</th>
<th><i
class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i>
Age
</th>
<th>Sexe</th>
<th>Age</th>
<th><i class="fa fa-circle txt-color-darken font-xs"></i> Target/
<i class="fa fa-circle text-danger font-xs"></i> Actual
</th>
<th><i
class="fa fa-fw fa-calendar text-muted hidden-md hidden-sm hidden-xs"></i>
Starts
</th>
<th><i
class="fa fa-fw fa-calendar text-muted hidden-md hidden-sm hidden-xs"></i>
Ends
</th>
<th>Tracker</th>
</tr>
</thead>
</sa-datatable>
因此,当我运行此命令时,我不会将api调用的数据获取到数据表中,并且控制台中没有错误...