Angular 4 - Les données sont appelées avant la population de données

Question

Je récupère des données du backend et les lie à la vue sous forme de lignes de table, puis j'appelle la fonction datatable sur la table, mais la fonction est appelée avant que la vue ne montre le lignes

import { Component, OnInit } from '@angular/core'; 
import {HttpClient} from '@angular/common/http'; 
declare var $ :any; 

@Component({ 
    selector: 'app-vendors', 
    templateUrl: './vendors.component.html', 
    styleUrls: ['./vendors.component.css'] 
}) 
export class VendorsComponent implements OnInit { 

    vendors: any; 
    constructor(private http: HttpClient) { } 

    ngOnInit() { 

    this.http.get('backendgetLINK').subscribe(data => { 
     // Read the result field from the JSON response. 
     this.vendors = data['vendors']; 
     $("#vendors-datatable").DataTable({}); 

     console.log(this.vendors); 
    }); 
    } 

} 

Answer 1

trouvé une solution

import { Component, OnInit } from '@angular/core'; 
import {HttpClient} from '@angular/common/http'; 
declare var $ :any; 

@Component({ 
    selector: 'app-vendors', 
    templateUrl: './vendors.component.html', 
    styleUrls: ['./vendors.component.css'] 
}) 
export class VendorsComponent implements OnInit { 

    vendors: any; 
    dataRetrieved:any; 
    constructor(private http: HttpClient) { 
this.dataRetrieved=false; 
    } 

    ngOnInit() { 

    this.http.get('backendLINK').subscribe(data => { 
     // Read the result field from the JSON response. 
     this.vendors = data['vendors']; 
     this.dataRetrieved=true; 
     // $("#vendors-datatable").DataTable({}); 

     console.log(this.vendors); 
    }); 
    } 
    ngAfterViewChecked() { 
    if (this.dataRetrieved) { 
    $("#vendors-datatable").DataTable({}); 
    } 
} 

} 

est celui-ci approprié?

Answer 2

Il existe un hook de cycle de vie ngAfterViewInit qui sera appelé après la vue des composants et ses vues enfants ont été initialisées.

essayer cette

ngAfterViewInit(){ 
    $("#vendors-datatable").DataTable({}); 
}