Angular:从API填充数据表,但未显示DATA

时间:2018-09-28 04:24:56

标签: angular datatable

我试图从一个宁静的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调用的数据获取到数据表中,并且控制台中没有错误...

0 个答案:

没有答案