Angular 5 нг для не работает на datatables.net - PullRequest
Новая
       5

Angular 5 нг для не работает на datatables.net

0 голосов
/ 14 мая 2018

Ниже приведен снимок экрана с ошибкой, когда я хочу отобразить данные в таблицах данных, используя ngFor:

Выходные данные 

 This code for Angular html component. I try to insert data into the datatables from typescript. Currently i get the data trough api and i want to insert the data into the datatable by using ngFor but it not working as in image attach.

  <tbody>
     <tr *ngFor="let company of companies">
       <td></td>
       <td>System Architect</td>
       <td>Edinburgh</td>
       <td>61</td>
       <td>2011/04/25</td>
       <td>$320,800</td>
       <td>Malaysia</td>
    </tr>
 <tbody>
Файл

datatables.component.ts: 

companies: Company[];
constructor(private companyService: CompanyService) {
this.companyService.getCompanies()
   .subscribe(
    (company: Company[]) => this.companies = company,
    err => console.error(err),
    () => console.log('done get company')
  );
}

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

После некоторого времени поиска я нашел несколько шагов, которые могут помочь вам с вашей угловой проблемой.

Сначала вам нужно связать свои данные. 

<table id="datatables">
    <thead>
        (...)
    </thead>
    <tfoot>
        (...)
    </tfoot>
    <tbody>
        <tr *ngFor="let company of companies">
            <td>company.id</td>
            <td>company.systemArchitect</td>
            <td>company.place</td>
            <td>company.number</td>
            <td>company.date</td>
            <td>company.value</td>
            <td>company.country</td>
        </tr>
    <tbody>
</table>

Во-вторых, вваш файл .component.ts, вам нужно сделать что-то более сложное.

Вы правильно сделали свои companyService.getCompanies, но для работы с datatables.net необходимо вызвать dataTable ().Но вам нужно подождать, пока данные поступят, прежде чем использовать.

Одним из способов является использование changeDetector углового ядра.Он может использоваться для запуска обнаружения изменений перед установкой данных.

Пример: 

companies: Company[];
constructor(private companyService: CompanyService, private chRef: ChangeDetectorRef) {}

ngOnInit(){
    this.companyService.getCompanies()
       .subscribe((company: Company[]) => {
          this.companies = company;

          // You'll have to wait that changeDetection occurs and projects data into 
          // the HTML template, you can ask Angular to that for you ;-)
          this.chRef.detectChanges();

          // Now you can use jQuery DataTables :
          const table: any = $('datatables');
          this.dataTable = table.DataTable();
       });
}

ref: https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99

0 голосов
/ 03 июня 2018

Вы можете попробовать связать эти данные с помощью {{company.object}}

...