Angular: заполнение данных из API, но DATA не отображается

Question

Я пытаюсь получить данные из успокоительного API и заполнить их данными, но когда я делаю это, данные, которые я получаю из API, не отображаются в моей таблице данных, даже если статус http-запроса равен 200.

это мой компонент:

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, в мою таблицу данных, и в консоли нет ошибки ...